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

时间:2017-02-06 16:01:34

标签: javascript jquery ajax

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 + '"/>');
             }
         }
     });
 });

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

2 个答案:

答案 0 :(得分:4)

那是因为你这样做:

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

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

答案 1 :(得分:1)

每次点击都会因为$(“。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 + '"/>');
        }
      }