問(wèn)題描述
這個(gè)問(wèn)題與我所追求的非常接近:用 Jquery 替換 Tweet 按鈕中的屬性
This question comes very closely to what I'm after: Replace an Attribute in the Tweet Button with Jquery
但是，建議的解決方案 只工作一次.也就是說(shuō)，我不能像這樣在我的 switch 語(yǔ)句中使用它:
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');
});
...
}
發(fā)生的情況是 data-text 屬性是根據(jù)先發(fā)生的情況設(shè)置的，之后不會(huì)更改.
What happens is that the data-text attribute is set according to whichever case happens first and doesn't change afterwards.
如何根據(jù)需要多次更改推文按鈕的 data-text 屬性?
How can I change data-text attribute of a Tweet Button as many times as I need?
更新:這是我正在處理的頁(yè)面:http://zhilkin.com/socio/en/
Update: here's the page I'm working on: http://zhilkin.com/socio/en/
Traits 表可以安全地忽略.我想對(duì) Sociotypes 表做的是，當(dāng)你點(diǎn)擊一個(gè)類(lèi)型時(shí)，右側(cè)描述下方的 Tweet Button 的 data-text 應(yīng)該相應(yīng)更改.
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.
現(xiàn)在它的工作原理是這樣的:如果我將鼠標(biāo)懸停在或單擊堂吉訶德"，那么 data-text 將設(shè)置為...堂吉訶德 ..."，并且它保持如果我稍后單擊Dumas"，則相同.反之亦然:如果我將鼠標(biāo)懸停在或單擊Dumas"，則 data-text 將設(shè)置為... Dumas ..."，并且在單擊Don Quixote"時(shí)不會(huì)更改.(其他類(lèi)型暫時(shí)為空.)
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 僅在我第一次運(yùn)行腳本時(shí)更改，但我需要根據(jù)類(lèi)型更改多次更新它.
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.
推薦答案
今天早上我為此苦苦掙扎了幾個(gè)小時(shí)，但終于成功了！問(wèn)題本質(zhì)上是您只能在頁(yè)面中包含 twitter widgets.js 腳本 once，并且該腳本會(huì)評(píng)估 data-text 屬性負(fù)載.因此，在您的示例中，您在加載腳本之前動(dòng)態(tài)設(shè)置 data-text 屬性 ，這將按預(yù)期工作.但是，由于腳本已經(jīng)運(yùn)行，因此您無(wú)法再進(jìn)行更新.
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.
我看到這篇文章建議你可以調(diào)用twttr.widgets.load() 在運(yùn)行時(shí)再次重新評(píng)估和重新渲染按鈕，但這對(duì)我不起作用.這是因?yàn)樵摵瘮?shù)重新評(píng)估 <a> 標(biāo)簽，而不是 <iframe> 標(biāo)簽！
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>，然后在調(diào)用 twttr.widgets.load 之前創(chuàng)建一個(gè)具有所有適當(dāng)屬性的新 元素() 最終重新評(píng)估它并把它變成一個(gè) <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>.
請(qǐng)參閱 this fiddle 了解工作示例！
Please see this fiddle for a working example!
這篇關(guān)于動(dòng)態(tài)更改推文按鈕“數(shù)據(jù)文本"內(nèi)容的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！