Question

我在freecodecamp的报价机上工作，我遇到了问题。当我点击一个按钮时，我能够得到一个引号进入屏幕，如下：

爱所有人，相信少数人，不做任何事。 - 威廉莎士比亚

但是，如果我再次点击该按钮，而不是第一个报价消失而第二个报价出现在我想要的位置，第二个报价会在第一个报价后添加，如下所示：

爱所有人，相信少数人，不做任何事。欢乐是最好的妆容。 - 威廉莎士比亚 - 安妮拉莫特

我已经尝试了几种不同的方法来删除第一个引用，第二个引用出现在它的位置。这是我的代码的当前版本。

＆＃13;

$('button').on('click', function() {
 $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(responseText) {
   $(".msg").removeClass();
   $(".nme").removeClass();
  $("#quote").addClass(".msg").append( responseText.quoteText);
   $("#author").addClass(".nme").append(" - " + responseText.quoteAuthor);
 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button type="button">Get Quote</button>
  <div id="quote"><span class="msg"></span></div>
  <div id="author"><span class="nme"></span></div>
</div>

＆＃13;

我在这里做错了什么？

Answer 1

不要使用追加。只需使用text（）来完全替换文本。附加获取当前文本并将新文本附加到其中。

即：

.addClass(".msg").text( responseText.quoteText);

Answer 2

函数append()只是将文本添加到结尾：

将参数指定的内容插入匹配元素集中每个元素的末尾。

您真正需要的是替换内容，请尝试使用text()

＆＃13;

$('button').on('click', function() {
 $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(responseText) {
   $(".msg").removeClass();
   $(".nme").removeClass();
  $("#quote").addClass(".msg").text( responseText.quoteText);
   $("#author").addClass(".nme").text(" - " + responseText.quoteAuthor);
 });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button type="button">Get Quote</button>
  <div id="quote"><span class="msg"></span></div>
  <div id="author"><span class="nme"></span></div>
</div>

＆＃13;

Answer 3

您将内容.append保留给div，您需要将其替换为.text，如下所示：

$('button').on('click', function() {
 $.getJSON("https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(responseText) {
   $(".msg").removeClass();
   $(".nme").removeClass();
  $("#quote").text( responseText.quoteText);
   $("#author").addClass(".nme").append(" - " + responseText.quoteAuthor);
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <button type="button">Get Quote</button>
  <div id="quote"><span class="msg"></span></div>
  <div id="author"><span class="nme"></span></div>
</div>

使用jQuery删除文本并添加新文本

3 个答案: