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

Question

这个问题非常接近我所追求的:用Jquery替换Tweet按钮中的属性

但是,建议的解决方案只能使用一次.也就是说,我不能在我的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属性是根据先发生的情况设置的,之后不会发生变化.

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

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

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

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

因此,Tweet按钮仅在我第一次运行脚本时更改,但我需要更新类型更改的次数.

Answer 1

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

我看到这篇文章建议您可以twttr.widgets.load()在运行时再次调用以重新评估和重新呈现按钮,但这对我不起作用.这是因为该函数重新评估<a>标签,而不是<iframe>标签!

因此,正如此处所指出的,解决方案是<iframe>从DOM中完全删除呈现,然后<a>在调用twttr.widgets.load()最终重新评估它并将其转换为一个之前,使用所有适当的属性创建一个新元素<iframe>.

一个有效的例子,请看这个小提琴!