Question

让我从头开始。我正在开发一个包含两个组件text area的网站：不是输入文本区域，而是well，只要单击按钮，就会显示文本。第二个组件是button，点击后随机引用应显示在well中。单击此按钮会调用部署在外部服务器上的API，其中Access-Control未设置为public。此API从具有许多引号及其作者的数据库中提取数据。以JSON格式。
现在，为了绕过这个Access-Control，我使用了JSON Padding`JSONP。但是这里的目标是每当使用jQuery调用API时，即每当单击按钮时，查询必须通过触发API来获取随机引用。而且，只要点击按钮，报价就必须不断更改为新报价。

这是我的代码：

 $(document).ready(function() {
  $("#click").each(function(index){
   $(this).on("click", function() {
   $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
	  $("#quote span").replaceWith(key[0].content + "<p>— " + key[0].title + "</p>");
         });
      });
    });
  });
});

<style>
.position-message{
  
  margin-left: 25%;
  margin-right:25%;
  margin-top:10%;
  margin-bottom:20%;
}

.background{
  background-color: rgb(170,180,200);
  border-radius:10%;
}
.button-shape{
   border-radius: 50%;
    width: 50px;
    height: 50px; 
    
    margin: auto;
}


#page{
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
  margin-bottom:2%;
}
#page-background{
  background-color: maroon;
}
#click{
  margin-bottom: 20px;
}
.quote-shape{
border-radius: 10%;
}
</style>

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<Title>Click to get quotes</Title>
   <body id="page-background">
      <div class="background" id="page">
      <div class="container-fluid">
         <div class="col">
            <div class="row-xs-6">
               <div id="quote" class="well position-message quote-shape"><span></span>
               </div>
            </div>
   
            <div class="row-xs-6">
               <div class="row text-center">
                  <button type="button" id="click" class="button-shape"><i class="fa fa-refresh fa-2x"></i>
                  </button>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

这是我的页面的快照：

第一个电话正在工作。但是当我尝试通过单击按钮再次触发API时，引用不会改变。这是我面临的问题。请告诉我如何在API被解雇时更改报价。

Answer 1

不要使用replaceWith()，因为它会替换您尝试匹配的元素，以防止将来的操作（$('#quote span')不匹配，因为跨度已从第一个操作替换）。试着简单地.html()来保留跨度，就像我在下面所做的那样（另外，我在上面的评论部分中应用了一些简化）：

$(document).ready(function() {
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
      $("#quote span").html(key[0].content + "<p>— " + key[0].title + "</p>");
    });
  });
});

.position-message{
  margin-left: 25%;
  margin-right:25%;
  margin-top:10%;
  margin-bottom:20%;
}

.background{
  background-color: rgb(170,180,200);
  border-radius:10%;
}

.button-shape{
  border-radius: 50%;
  width: 50px;
  height: 50px; 
  margin: auto;
}

.quote-shape{
  border-radius: 10%;
}

#page{
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
  margin-bottom:2%;
}
#page-background{
  background-color: maroon;
}
#click{
  margin-bottom: 20px;
}

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
  <body id="page-background">
    <div class="background" id="page">
      <div class="container-fluid">
         <div class="col">
            <div class="row-xs-6">
               <div id="quote" class="well position-message quote-shape"><span></span>
               </div>
            </div>
   
            <div class="row-xs-6">
               <div class="row text-center">
                  <button type="button" id="click" class="button-shape"><i class="fa fa-refresh fa-2x"></i>
                  </button>
               </div>
            </div>
         </div>
      </div>
    </div>
  </body>
</html>

如何在执行操作时重新执行jQuery

1 个答案: