javascript - Jquery attr() 在点击函数中不起作用

Question

我已经尝试了 3 天来弄清楚为什么 attr() 在 Jquery 的函数内部不起作用。看起来问题已经得到解答，但没有一个对我有用。

我正在尝试更改推文按钮的 data-text 属性以发布当前文本。

这是我的代码:

$(".twitter-share-button").attr("data-text", "Hello World"); //Working

$("#change").on("click", function() {
    $(".twitter-share-button").attr("data-text", "Hello Universe"); // Not working
});

Jsfiddle 中的示例:https://jsfiddle.net/ooneskbe/

Answer 1

您的问题并不能代表全部情况。这不起作用的原因是因为您包含以下脚本:

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

此脚本会更改您的 HTML。如果不包含脚本，则生成的按钮 HTML 为

<a class="twitter-share-button" href="https://twitter.com/share" data-show-count="false" data-size="large">Tweet</a>

但是，一旦加载并执行此脚本，您的 HTML 就会变成

<a class="btn" id="b" href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ffiddle.jshell.net%2F_display%2F&amp;ref_src=twsrc%5Etfw&amp;tw_p=tweetbutton&amp;url=https%3A%2F%2Ffiddle.jshell.net%2F_display%2F">
    <i></i>
    <span class="label" id="l">Tweet</span>
</a>

您可以看到新的 HTML 没有类 twitter-share-button。我不确定您想通过 data 属性实现什么目的，但您需要考虑其他方法来实现此目的。