如何刷新或重新加载单个 HTML 元素

Question

请帮助我在初始页面加载后刷新单个 html 元素。我的程序在基本方面应该做什么：（FreeCodeCamp 练习：Random Quote Machine）

从API
显示引用和作者
按钮获取新的quote/author
推文按钮 quote/author

我已经成功地使一切正常工作，但我发现用于发送推文的定位元素在初始页面加载后不会刷新。它的 "data-text" 属性已相应更改，但不会反映在 button/link.

上

这是我的 html 正文的摘录：完整代码位于 http://codepen.io/jattas/pen/gmNQpv

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="button-box">
  <button id="getQuote">Generate new quote</button>
  <a href="https://twitter.com/share" class="twitter-share-button" data-text="" data-show-count="false">Tweet</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

我需要刷新锚元素以显示新更改的属性，而不是初始页面加载时的属性。请帮忙！我相信这不应该那么困难。

这是我的相关摘录 javascript:

var textToTweet = '';

function processQuote() {

  var currentQuote = obj.quote;
  var currentAuthor = obj.author;
  $(".quote").html(currentQuote);
  $(".author").html("- " + currentAuthor);
  textToTweet = currentQuote + " " + "-" + currentAuthor;
  $(".twitter-share-button").attr("data-text", textToTweet);
  alert($(".twitter-share-button").attr("data-text"));       //this is to confirm that the "data-text" attribute has changed as planned
}

$(document).ready(function() {

  processQuote();

  $("#getQuote").on("click", function() {
    getQuote();
    processQuote();
  });

});

非常感谢。

Answer 1

根据您的描述猜测，我认为您的引用和作者元素选择器是错误的。由于您没有为那些我显示 html 但我不是 100% 确定。

您可能在 html 中加载了带有预定义文本的元素，然后尝试用 processQuote() 填充它们。我想到了这个，因为你可以正确填写数据属性，但似乎无法更新 link 文本。请检查您的元素是否真的有 class="quote" 和 class="author" 而不是 id 或不同的名称。

验证这一点的一种简单方法是在浏览器开发人员控制台中调用选择器。你会得到一个元素，悬停时也会突出显示。如果他们不 return 一个元素，那他们就错了。

正如 Satpal 建议的那样，您应该在回调函数成功时调用 processQuote()。这是因为您的数据是异步检索的，您不能保证在调用 getQuote() 后到达 processQuote() 时已经拥有它。

另外一件小事：由于您只想更改文本，因此可以使用 .text('my text') 而不是 .html('my text')。这可以防止注入（在您的情况下不太可能，但在我看来仍然是一个很好的做法）。

编辑：我完全错过了你的观点然后抱歉。

如果你在最后将它添加到你的 getQuote 成功案例中，它应该可以工作：

var parentElem = $('iframe').parent(); $('iframe').remove(); $(parentElem).append('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + obj.quote + '" data-show-count="false">Tweet</a>'); twttr.widgets.load();

我在另一个堆栈溢出页面中找到了这个 here。

虽然所有 link 都死了，所以我自己试了一下。我从未使用过推特按钮，所以这可能不是最好的方法。基本上它会删除您当前的按钮并重新创建它。您可能想尝试特殊字符（尤其是引号）是否仍然适用于这种方式。

Answer 2

由于 Danyx's answer to 问题，我找到了解决此问题的方法。

Morfium 的上述解决方案确实有效，但它创建了额外的按钮，这些按钮很难放置在需要的地方。

相反，根据 Danyx 的解决方案，不要在 html 中创建按钮。而是在每次创建新报价时运行的函数中创建它：

function createButton() {           
  $(".twitter-share-button").remove();  //this does nothing during the first run but is required in order to prevent creating duplicate buttons
  var button = document.createElement('a');
  button.classList += "twitter-share-button";
  button.innerHTML = "Tweet";
  button.setAttribute("data-text", textToTweet);
  button.setAttribute("data-url", " "); //removes unwanted codepen url at end of tweet      
  button.setAttribute("data-via", "");
  button.setAttribute("href", "https://twitter.com/intent/tweet");
  document.querySelector(".button-box").appendChild(button);
  twttr.widgets.load();  //this reloads the twitter widget (https://dev.twitter.com/web/javascript/loading) that I failed to mention in my original question - more info on this in Danyx's answer mentioned above
}

完整代码可见here.

如何刷新或重新加载单个 HTML 元素

How to refresh or reload a single HTML element

html

twitter

jquery

refresh

twitter-widget