động thay đổi Tweet Button "dữ liệu văn bản" nội dung

Question

câu hỏi này đi kèm rất chặt chẽ với những gì tôi sau: Replace an Attribute in the Tweet Button with Jquery

Tuy nhiên, the suggested solution công trình chỉ một lần. Đó là, tôi không thể sử dụng nó trong chuyển đổi tôi tuyên bố như thế này:

switch(element.id) 
    { 
     case "t1": 
      $(document).ready(function(){ 
       $('a[data-text]').each(function(){ 
        $(this).attr('data-text', Text_Variant_1); 
       }); 
       $.getScript('http://platform.twitter.com/widgets.js'); 
      }); 
      break; 
     case "t2": 
      $(document).ready(function(){ 
       $('a[data-text]').each(function(){ 
        $(this).attr('data-text', Text_Variant_2); 
       }); 
       $.getScript('http://platform.twitter.com/widgets.js'); 
      }); 
     ... 
    } 

gì xảy ra là dữ liệu văn bản thuộc tính được đặt theo trường hợp nào xảy ra trước và không thay đổi sau đó.

Tôi làm cách nào để thay đổi thuộc tính dữ liệu văn bản thuộc tính của nút Tweet bao nhiêu lần tôi cần?

Cập nhật: đây là trang tôi đang làm việc trên: http://zhilkin.com/socio/en/

Các đặc điểm bảng có thể được bỏ qua một cách an toàn. Những gì tôi muốn làm với bảng Sociotypes là khi bạn nhấp vào một loại, dữ liệu văn bản của nút Tweet bên dưới mô tả ở bên phải sẽ được thay đổi cho phù hợp. Ngay bây giờ, nó hoạt động như thế này: nếu tôi di chuột lên hoặc nhấp vào "Don Quixote", thì dữ liệu văn bản được đặt thành "... Don Quixote ..." và nó vẫn giữ nguyên nếu tôi nhấp vào "Dumas" sau. Và ngược lại: nếu tôi di chuột lên hoặc nhấp vào "Dumas", thì dữ liệu văn bản được đặt thành "... Dumas ..." và không thay đổi nếu tôi nhấp vào "Don Quixote". (Các loại khác hiện đang trống.)

Vì vậy, nút Tweet chỉ thay đổi lần đầu tiên tôi chạy tập lệnh, nhưng tôi cần nó được cập nhật nhiều lần khi loại thay đổi.

Answer 1

tôi vật lộn với điều này cho một vài giờ sáng nay, nhưng cuối cùng đã nhận nó làm việc! Vấn đề cơ bản là bạn chỉ có thể bao gồm twitter widgets.js script sau khi trong trang và tập lệnh đó đánh giá thuộc tính data-text khi tải. Do đó, trong ví dụ của bạn, bạn tự động đặt thuộc tính data-texttrước khi tải tập lệnh, sẽ hoạt động như mong đợi. Tuy nhiên, sau đó bạn có thể không cập nhật thêm nữa vì tập lệnh đã chạy.

Tôi thấy this article đề xuất bạn có thể gọi lại twttr.widgets.load() khi chạy để đánh giá lại và hiển thị lại các nút, tuy nhiên điều đó không hiệu quả đối với tôi. Điều này là do hàm đó đánh giá lại các thẻ <a>, không phải là thẻ!

Vì vậy, các giải pháp, như pointed out here, là để gỡ bỏ hoàn toàn render từ DOM, sau đó đưa ra một yếu tố <a> mới với tất cả các thuộc tính thích hợp trước khi gọi twttr.widgets.load() để cuối cùng đánh giá lại nó và biến nó thành một .

Vui lòng xem this fiddle để biết ví dụ làm việc!

Answer 2

kể từ khi bạn đang sử dụng each vòng lặp bạn có thể sử dụng if báo cáo thay vì:

$(document).ready(function(){ 
     $('a[data-text]').each(function(){ 
      if (theCase == 1) { 
      $(this).attr('data-text', Text_Variant_1); 
      } 
      else if (theCase == 2) { ... } 
     }) 
}); 

Answer 3

Bạn cũng có thể sử dụng cuộc gọi createShareButton API của Twitter:

function callAsRequired(){ 
    var nodeID = 'YourTwitterNodeID' 

    //Remove existing share button, if it exists. 
    var myNode = document.getElementById(nodeID); 
    while (myNode.firstChild) { 
    myNode.removeChild(myNode.firstChild); 
    } 

    //Create button and customise 
    twttr.widgets.createShareButton(
    'http://your.custom.url.here/', 
    document.getElementById(nodeID), 
    { 
     count: 'none', 
     text: 'Your custom tweet here' 
    }; 
}