Question

我正在尝试使用简单的jQuery事件更改下面html中的data-text=""属性，但由于某种原因它会无声地失败。这是html：

<!-- Quote Section -->
<div class="row m-spacer">
    <div class="col-sm-12 bg-light">
        <h3 class="text-dark">The Random Quoter</h3>
        <p>Generate a random quote, with the click of a button.</p>
        <button class="btn btn-dark m-3" id="quote-btn" type="button">Show me a quote!</button>
        <p class="text-muted mx-5" id="quote-line"></p>
        <p class="text-muted mx-5" id="quote-author"></p>
    </div>
</div>

<!-- Twitter Sharing Section -->
<div class="row">
    <div class="col-sm-12 bg-dark">
        <h3 class="text-light d-flex justify-content-center align-text-top m-4">Tweet That Quote!</h3>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 bg-dark d-flex justify-content-center m-spacer">
        <a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
           class="twitter-share-button m-4"
           data-show-count="false"
           data-text="This text should be replaced with the quote above."
           data-size="large">Tweet</a>
    </div>
</div>

...这里是相关的jQuery：

$(document).ready(function() {
    // Quote Button:
    $("#quote-btn").click(function() {
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(quote) {
            $("#quote-line").html(quote[0]["content"]);
            $("#quote-author").text("-" + quote[0]["title"]);
            var quoteText = $("#quote-line").text();
            $(".twitter-share-button").attr("data-text", quoteText);
        });
    });
}); //End of doc-ready.

我已经在脚本中包含了cdn for widgets.js：

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

我在这里错过了一个非常简单的步骤吗？单击引号按钮时，它应将data-text属性替换为引用行中的文本。它没有。我阅读了整个文档，无法辨别我做错了什么。如果您愿意将其包括在内，我会非常感谢您引用的文档中的链接。这是我整天的地方：Docs

jQuery没有改变twitter-share-button上的数据文本属性

0 个答案: