動態更改推文按鈕“數據文本”內容

Question

這個問題與我所追求的非常接近： Replace an Attribute in the Tweet Button with Jquery

但是，建議的解決方案僅適用一次。 也就是說，我不能像這樣在我的switch語句中使用它：

    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');
            });
        ...
    }

發生的情況是數據文本屬性是根據先發生的情況設置的，之后不會改變。

如何根據需要多次更改推文按鈕的數據文本屬性？

更新：這是我正在處理的頁面：http: //zhilkin.com/socio/en/

可以安全地忽略Traits表。 我想對Sociotypes表做的是，當你點擊一個類型時，右邊描述下方的推文按鈕的數據文本應該相應地改變。

現在它是這樣工作的：如果我將鼠標懸停在或單擊“唐吉訶德”，則數據文本設置為“......唐吉訶德......”，如果我稍后單擊“Dumas”，它會保持不變。 反之亦然：如果我將鼠標懸停在或單擊“Dumas”，則數據文本將設置為“... Dumas ...”並且如果我單擊“Don Quixote”則不會更改。 （其他類型目前為空。）

因此，Tweet Button 僅在我第一次運行腳本時更改，但我需要根據類型更改多次更新。

Answer 1

今天早上我為此掙扎了幾個小時，但終於讓它起作用了！ 問題本質上是您只能在頁面中包含一次twitter widgets.js腳本，並且該腳本在加載時評估data-text屬性。 因此，在您的示例中，您在加載腳本之前動態設置data-text屬性，這將按預期工作。 但是，由於腳本已經運行，因此您不能再進行更新。

我看到這篇文章建議您可以在運行時再次調用twttr.widgets.load()以重新評估和重新呈現按鈕，但這對我不起作用。 這是因為該函數重新評估<a>標簽，而不是<iframe>標簽！

因此，正如這里所指出的，解決方案是從 DOM 中完全刪除渲染的<iframe> ，然后在調用twttr.widgets.load()以最終重新評估它之前創建一個具有所有適當屬性的新<a>元素並將其轉換為<iframe> 。

請參閱此小提琴以獲取工作示例！

Answer 2

您還可以使用 Twitter 的createShareButton API 調用：

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'
    });
}

Answer 3

由於您正在使用each循環，因此您可以改用if語句：

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