动态更改推文按钮“数据文本"内容 [英] Dynamically change Tweet Button "data-text" contents

问题描述

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

This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery

但是，建议的解决方案 只工作一次.也就是说，我不能像这样在我的 switch 语句中使用它:

However, the suggested solution works just once. That is, I cannot use it in my switch statement like this:

    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 属性是根据先发生的情况设置的，之后不会更改.

What happens is that the data-text attribute is set according to whichever case happens first and doesn't change afterwards.

如何根据需要多次更改推文按钮的 data-text 属性?

How can I change data-text attribute of a Tweet Button as many times as I need?

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

Update: here's the page I'm working on: http://zhilkin.com/socio/en/

Traits 表可以安全地忽略.我想对 Sociotypes 表做的是，当你点击一个类型时，右侧描述下方的 Tweet Button 的 data-text 应该相应更改.

The Traits table can be safely ignored. What I want to do with the Sociotypes table is that when you click on a type, the data-text of the Tweet Button below the description on the right should be changed accordingly.

现在它的工作原理是这样的:如果我将鼠标悬停在或单击堂吉诃德"，那么 data-text 将设置为...堂吉诃德 ..."，并且它保持如果我稍后单击Dumas"，则相同.反之亦然:如果我将鼠标悬停在或单击Dumas"，则 data-text 将设置为... Dumas ..."，并且在单击Don Quixote"时不会更改.(其他类型暂时为空.)

Right now it works like this: if I hover on or click "Don Quixote", then data-text is set to "... Don Quixote ...", and it stays the same if I click "Dumas" later. And vice versa: if I hover on or click "Dumas", then data-text is set to "... Dumas ..." and doesn't change if I click "Don Quixote". (Other types are empty at the moment.)

因此，Tweet Button 仅在我第一次运行脚本时更改，但我需要根据类型更改多次更新它.

So, the Tweet Button is only changed the first time I run the script, but I need it to be updated as many times as the type changes.

推荐答案

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

I struggled with this for a couple of hours this morning, but finally got it working! The problem is essentially that you can only include the twitter widgets.js script once in the page, and that script evaluates the data-text attribute on load. Therefore, in your example, you dynamically set the data-text attribute before loading the script, which will work as expected. However, you can then make no further updates as the script has already run.

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

I saw this article suggesting you can call twttr.widgets.load() again at runtime to re-evaluate and re-render the buttons, however that didn't work for me. This is because that function re-evaluates <a> tags, not <iframe> tags!

因此，正如 此处指出，解决方案是从 DOM 中完全移除渲染的 <iframe>，然后在调用 twttr.widgets.load 之前创建一个具有所有适当属性的新 元素() 最终重新评估它并把它变成一个 <iframe>.

So the solution, as pointed out here, is to completely remove the rendered <iframe> from the DOM, then make a new <a> element with all the appropriate attributes before calling twttr.widgets.load() to finally re-evaluate it and turn it into an <iframe>.

请参阅 this fiddle 了解工作示例！

Please see this fiddle for a working example!

这篇关于动态更改推文按钮“数据文本"内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！