javascript 动态更改推文按钮“数据文本”内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10486354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change Tweet Button "data-text" contents
提问by Mikhail
This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery
这个问题与我所追求的非常接近：Replace an Attribute in the Tweet Button with Jquery
However, the suggested solutionworks just once. That is, I cannot use it in my switchstatement like this:
但是，建议的解决方案只适用一次。也就是说，我不能像这样在我的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');
});
...
}
What happens is that the data-textattribute is set according to whichever case happens first and doesn't change afterwards.
发生的情况是数据文本属性是根据先发生的情况设置的，之后不会改变。
How can I change data-textattribute of a Tweet Button as many times as I need?
如何根据需要多次更改推文按钮的数据文本属性？
Update:here's the page I'm working on: http://zhilkin.com/socio/en/
更新：这是我正在处理的页面：http: //zhilkin.com/socio/en/
The Traitstable can be safely ignored. What I want to do with the Sociotypestable is that when you click on a type, the data-textof the Tweet Button below the description on the right should be changed accordingly.
该性状表可以安全地忽略。我想对Sociotypes表做的是，当你点击一个类型时，右边描述下方的推文按钮的数据文本应该相应地改变。
Right now it works like this: if I hover on or click "Don Quixote", then data-textis 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-textis set to "... Dumas ..." and doesn't change if I click "Don Quixote". (Other types are empty at the moment.)
现在它是这样工作的：如果我将鼠标悬停在或单击“唐吉诃德”，则数据文本设置为“......唐吉诃德......”，如果我稍后单击“Dumas”，它会保持不变。反之亦然：如果我将鼠标悬停在或单击“Dumas”，则数据文本将设置为“... Dumas ...”并且如果我单击“Don Quixote”则不会更改。（其他类型目前为空。）
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.
因此，Tweet Button 仅在我第一次运行脚本时更改，但我需要根据类型更改多次更新它。
回答by chrisf
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.jsscript oncein the page, and that script evaluates the data-textattribute on load. Therefore, in your example, you dynamically set the data-textattribute beforeloading the script, which will work as expected. However, you can then make no further updates as the script has already run.
今天早上我为此挣扎了几个小时，但终于让它起作用了！问题本质上是您只能在页面中包含一次twitter widgets.js脚本，并且该脚本在加载时评估该属性。因此，在您的示例中，您在加载脚本之前动态设置属性，这将按预期工作。但是，由于脚本已经运行，因此您无法再进行更新。data-textdata-text
I saw this articlesuggesting 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!
我看到这篇文章建议您可以twttr.widgets.load()在运行时再次调用以重新评估和重新呈现按钮，但这对我不起作用。这是因为该函数重新评估<a>标签，而不是<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>.
因此，正如这里所指出的，解决方案是<iframe>从 DOM 中完全删除渲染的内容，然后<a>在调用之前创建一个具有所有适当属性的新元素，twttr.widgets.load()最终重新评估它并将其转换为<iframe>.
Please see this fiddlefor a working example!
请参阅此小提琴以获取工作示例！
回答by Ben
You can also use Twitter's createShareButtonAPI call:
您还可以使用 Twitter 的createShareButtonAPI 调用：
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'
};
}
回答by undefined
since you are using eachloop you can use ifstatements instead:
由于您使用的是each循环，因此您可以改用if语句：
$(document).ready(function(){
$('a[data-text]').each(function(){
if (theCase == 1) {
$(this).attr('data-text', Text_Variant_1);
}
else if (theCase == 2) { ... }
})
});
