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网址。我提供了虚拟数据。它应该工作。

每次显示您正在使用现有内容追加内容。所以它会重复。因此，您必须删除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>

另一种方式：

您可以在就绪功能上进行呼叫，并在单击按钮时显示和隐藏

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

1 个答案: