Question

请在初始页面加载后帮我刷新单个html元素。我的程序应该用基本术语做什么：（FreeCodeCamp练习：随机报价机）

从API获取随机引用
显示引用和作者
按钮获取新报价/作者
按钮发推文/作者

我已经成功地使一切正常工作但我发现我用来发送推文的我的锚元素在初始页面加载后不会刷新。它的“数据 - 文本”属性已相应更改，但它没有在按钮/链接上反映出来。

这是我的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。

您可能在html中加载了带有预定义文本的元素，然后尝试使用processQuote（）填充它们。我想到了这一点，因为您可以正确填充数据属性，但似乎无法更新链接文本。请检查您的元素是否真的有类=＆＃34;引用＆＃34;和班级=＆＃34;作者＆＃34;而不是ids或不同的名字。

验证这一点的简单方法是在浏览器开发者控制台中调用您的选择器。您将获得一个元素，在悬停时也会突出显示。如果他们不回复元素他们就错了。

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

另一件小事：由于您只想更改文字，因此您可以使用.text（＆＃39;我的文字＆＃39;）代替.html（＆＃39;我的文字＆＃39;）。这可以防止注射（不太可能在你的情况下，但仍然是一个很好的做法imo）。

编辑：我完全想念你，然后对不起。

如果你在最后将它添加到你的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中找到了这个。

所有链接都已死，所以我自己尝试了。我从来没有使用过twitter按钮，所以这可能不是最好的方法。基本上它会删除您当前的按钮并重新创建它。如果特殊字符（尤其是引号）仍以这种方式工作，您可能想尝试。

Answer 2

由于Danyx对this问题的回答，我找到了解决此问题的方法。

以上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元素

2 个答案: