javascript - 如何在点击事件上更新 HTML 元素？

Question

我对编程真的很陌生，我正在尝试构建一个随机报价机。用户应该能够在单击“新报价”按钮后获得新的随机报价。我的问题是，第一次单击“新报价”按钮时，我得到了一个新报价，但随后的单击事件中报价不再改变。有人可以确定我的代码中的问题出在哪里吗？

这是我的 HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="container-fluid">

  <div class="header">
    <h1 class="title"> Antsa's Random Quote Machine </h1>

  </div>

  <div class="quote_box">

    <div class="col-xs-12 well quote">
      Quote will go here
    </div>

    <div class="row col-xs-12">
      <a href="https://twitter.com/antsarand" target="_blank"><button class ="btn btn-primary"><i class="fa fa-twitter" id="twitter"></i> </button></a>

      <button id = "newQuote" class = "btn btn-primary">
        New Quote
      </button>
    </div>


    </div>

  </div>
</div>

这是我的 JavaScript 代码:

$(document).ready(function() {

   $("#newQuote").on("click", function() {
     $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
       var html = "";
       json.forEach(function(val) {

         html += "<div class = 'quote'> ";

         html += "<p class = 'quotation'>" + val.content + val.title + "</p>";

         html += "</div>";
       });
       $(".quote").html(html);
     });

   });
 });

Answer 1

不要相信示例(不检查控制台)

您的代码应该可以正常工作，Codepen 示例不支持跨源请求，因此它们会阻止您的 AJAX 调用:

但是如果你 use a different example provider like JSBin它们应该按预期工作:

缓存要缓存

如果您计划在同一页面内发出多个请求，请考虑通过 jQuery 代码中的以下语句显式禁用缓存:

$.ajaxSetup({ cache: false });

这将防止发生任何缓存并确保每次都会提取新的报价。

需要更多吗？

最后，您会注意到查询字符串参数之一似乎准确指定了要提取的记录数[posts_per_page]=1。如果您想检索多个引号并实际使用 forEach() 函数，您可能需要对此进行调整。