Question

在this示例中，我使用ajax从reddit加载JSON数据。由于响应来自服务器，我将其附加到具有类.text的div。

<button type="button" class="btn">Click me!</button>
<div class="text">Replace me!!</div>

 $(".btn").click(function () {
     $.ajax({
         url: "http://www.reddit.com/r/aww/search.json?q=puppy&restrict_sr=true",
         method: "GET",
         success: function (result) {
             $(".text").text("");
             for (var i = 0; i < result.data.children.length; i++) {
                 $(".text").append('<img src="' + result.data.children[i].data.thumbnail + '"/>');
             }
         }
     });
 });

这很有效。我的问题是，当我反复按下按钮时，为什么追加功能不再添加相同的图像？附加功能是否会以某种方式避免重复内容？

Answer 1

那是因为你这样做：

$(".text").text("");

当您这样做时，每次单击按钮时都会清空div。

Answer 2

每次点击都会因为$（“。text”）而删除元素.text（“”）; 如果你添加像我这样的元素，你可以用任何东西替换文本，并在新的div中显示元素。

如果您使用这样的代码，文本将会消失，图片将会在那里。

HTML：

 <button type="button" class="btn">Click me!</button>
    <div class="text">Replace me!!</div>
    <div class="images"> </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

JS

// Attach a button listener to the button
//
  $(".btn").click(function(){
    $.ajax({
      url: "http://www.reddit.com/r/aww/search.json?q=puppy&restrict_sr=true",
      method: "GET",
      success: function(result){ 
        $('.text').html('')

        for(var i=0; i < result.data.children.length ; i++){
          $(".images").append('<img src="' + result.data.children[i].data.thumbnail + '"/>');
        }
      }

jquery附加功能是否会以某种方式避免重复内容？

2 个答案: