Ajax返回数据不要在jquery中重复内容

当你点击按钮的时候显示一个内容，然后点击按钮的时候隐藏内容，然后点击按钮的时候显示重复，不知如何去解决这个问题？大神能帮助解决吗？非常感谢你！Ajax返回数据不要在jquery中重复内容

HTML文件

<button id="liuyan" type="button" class="btn btn-primary btn-lg">my click</button><div id="mydiv2">

JavaScript文件

$("button#liuyan").on("click", function(e) { 

     e.preventDefault(); 

     $.ajax({ 
      url: 'http://localhost:3000/api/comment', 
      method: 'GET', 
      dataType: "jsonp", 
      async: false, 
     }).done(function(data, textStatus, jqXHR) { 

      var mydiv2 = $("#mydiv2"); 

      if (mydiv2.css("display") === "none") { 
       mydiv2.show(); 
       var mycode = document.createElement('div'); 
       mycode.innerHTML = '<pre><code data-language="json">' + JSON.stringify(data, undefined, 2) + '</code></pre>'; 
       Rainbow.color(mycode, function() { 
        document.getElementById('mydiv2').appendChild(mycode) 
       }); 
      } else { 
       mydiv2.hide(); 

      } 

      console.log(data); 
      console.log(jqXHR.responseText); 
     }); 

    });

来源

2017-05-22 wen tian

是什么'？Rainbow' –

请澄清问题的措辞。我已经阅读了3次，但仍然不确定提问的内容。 –

彩虹是代码语法突出显示！你去https://craig.is/making/rainbows –

我没有AJAX网址。我给了虚拟数据。它应该工作。

每一次，虽然显示你正在追加与现有内容的内容。所以它会重复。所以你必须删除div中的现有内容并将其附加到div。

附加

document.getElementById('mydiv2').innerHTML = '';

那么现有的内容将被清除之前添加此行。

$("button#liuyan").on("click", function(e) { 
 

 
     e.preventDefault(); 
 

 
      data = { 
 
      "name":"hello" 
 
      } 
 

 
      var mydiv2 = $("#mydiv2"); 
 

 
      if (mydiv2.css("display") === "none") { 
 
       mydiv2.show(); 
 
       var mycode = document.createElement('div'); 
 
       mycode.innerHTML = '<pre><code data-language="json">' + JSON.stringify(data, undefined, 2) + '</code></pre>'; 
 
       //Rainbow.color(mycode, function() { 
 
       document.getElementById('mydiv2').innerHTML = '';  
 
       document.getElementById('mydiv2').appendChild(mycode) 
 
       //}); 
 
      } else { 
 
       mydiv2.hide(); 
 

 
      } 
 

 
     // console.log(data); 
 
     // console.log(jqXHR.responseText); 
 
     // }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="liuyan">Click</button> 
 
<div id="mydiv2"></div>

另一种方式：

你还可以充分准备功能，并显示出呼叫和隐藏当点击该按钮

来源

2017-05-22 23:51:36

好的，非常感谢你！ –

Ajax返回数据不要在jquery中重复内容

回答

相关问题