1

请帮助我在初始页面加载后刷新单个 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();
  });

});

非常感谢。

4

2 回答 2

0

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

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

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

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

另一件小事：由于您只想更改文本，因此可以使用 .text('my text') 代替 .html('my text')。这可以防止注入（在您的情况下不太可能，但仍然是一个很好的实践 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();

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

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

于 2017-04-18T13:08:56.667 回答
0

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

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
}

完整的代码可以在这里看到。

于 2017-04-20T13:42:32.560 回答