javascript - 再次单击 JavaScript 中的按钮时数据会重复

Question

我能够显示所有数据，但是当我再次单击“我的团队”时，数据会显示两次。多次点击意味着数据会显示更多次。如何才能显示一次数据？我的意思是只有 6 个团队成员，并且没有 6 个团队成员重复。

  function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");

    var data1 = "TEAMSEARCH";
    $.ajax({
      url: 'TeamAssignment',
      type: 'POST',
      data: {
        data1: data1
      },
      success: function(result) {
        var memberList = $.parseJSON(result);
        for (var i = 0; i < memberList.length; i++) {
          console.log(memberList[i].fullName);
          document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>';
        }
      }
    });
  }

  <div class="col-lg-3 mb-0" style="display: flex;align-items: center;">
    <div class="popup" onclick="myFunction()">
      <h6>My team</h6>
      <span class="popuptext" id="myPopup">My team members:<br><h7 id="demo"></h7><br></span>
    </div>
  </div>
</div>
<ol class="breadcrumb"></ol>

Answer 1

在开始 for 循环之前，您需要清除 demo 元素:

success: function(result) {
    var memberList = $.parseJSON(result);
    document.getElementById("demo").innerHTML = '';
    for (var i = 0; i < memberList.length; i++) {
          console.log(memberList[i].fullName);
          document.getElementById("demo").innerHTML += '<li style="list-style:none;">' + memberList[i].fullName + '</li>';
        }
    }

就我个人而言，在使用 jquery 时，我更喜欢使用以下代码:

$.ajax({
    url: 'TeamAssignment',
    type: 'POST',
    data: {
        data1: data1
    },
    dataType: "json",
    success: function(memberList) {
        $("#demo").html('');
        for (var i = 0; i < memberList.length; i++) {
            console.log(memberList[i].fullName);
            $("#demo").append('<li style="list-style:none;">' + memberList[i].fullName + '</li>');
        }
    }
});