Question

这个问题与我追求的内容非常接近：Replace an Attribute in the Tweet Button with Jquery

然而，the suggested solution仅适用一次。也就是说，我不能在我的 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');
            });
        ...
    }

data-text 属性是根据先发生的情况设置的，之后不会改变。

如何根据需要多次更改推文按钮的数据文本属性？

更新：这是我正在处理的页面：http://zhilkin.com/socio/en/

可以安全地忽略 Traits 表。我想用 Sociotypes 表做的是，当你点击一个类型时，右边描述下面的Tweet按钮的数据文本应该相应地改变

现在它的工作原理如下：如果我悬停或点击“堂吉诃德”，那么数据文本将被设置为“...堂吉诃德......”，它会保持不变如果我稍后点击“Dumas”也一样。反之亦然：如果我悬停或单击“Dumas”，则数据文本将设置为“... Dumas ...”，如果单击“Don Quixote”，则不会更改。（其他类型目前都是空的。）

因此，Tweet按钮仅在我第一次运行脚本时更改，但我需要在类型更改时多次更新。

Answer 1

今天早上我挣扎了几个小时，但终于搞定了！问题基本上是您只能在页面中包含twitter widgets.js 脚本一次，并且该脚本会在加载时评估data-text属性。因此，在您的示例中，您在加载脚本之前动态设置data-text属性，这将按预期工作。但是，您可以不再进行更新，因为脚本已经运行。

我看到this article建议您可以在运行时再次调用twttr.widgets.load()来重新评估和重新呈现按钮，但这对我不起作用。这是因为该函数重新评估了<a>个标签，而不是<iframe>标签！

因此，pointed out here的解决方案是从DOM中完全删除呈现的<iframe>，然后在调用{{1}之前创建一个包含所有适当属性的新<a>元素最终重新评估它并将其变成twttr.widgets.load()。

请参阅this fiddle了解实例！

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

动态更改Tweet按钮“数据文本”内容

3 个答案: