javascript - Ajax返回数据jquery中不重复内容

Question

当点击按钮的时候显示某内容，再点击按钮的时候内容隐藏，再点击按钮的时候又显示重复内容，不知道如何解决这个问题？大神能帮忙解决一下吗？非常感谢!

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);
        });

    });

Answer 1

我没有 AJAX URL。我提供了虚拟数据。它应该可以工作。

每次，当显示您正在将内容附加到现有内容时。所以会重复。因此，您必须删除 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>

另一种方式:

您可以调用就绪函数并在单击按钮时显示和隐藏