javascript - 数组推送和拼接不正确？

Question

我正在制作一个邀请系统。我正在使用 ajax 加载搜索结果列表。单击 li 时，我将用户的 id 推送到数组中，并在 li 上附加复选标记，让他们知道自己已添加到列表中。

1. 插入工作正常，但拼接不工作。此外，当列表为空时，提交按钮不会返回到其禁用状态和原始样式。

最后，当我再次搜索(重新调用 ajax)时，它会删除附加的复选标记。有没有一种方法可以使用 javascript 来存储单击的用户并在搜索其他名称时保留附加的复选标记？

(^ 当我用ajax加载结果时，我检查一个人是否被邀请在我的数据库中，我可以这样做，所以如果他们已经被邀请，点击将从表中删除..如果不在li上点击我插入成功时使用 ajax 和 setTimeout ..您认为这是一个不好的做法吗？)

下面是我的 html && 脚本

HTML
<li class='inviteUser'>
    <img src='$usersProfilePhoto' alt=''>
    <h2>$usersname</h2>
    <input type='hidden' value='$otherUserID'>
    <span></span>
</li>


$(function(){

    var inviteList = new Array();

      $(document).on('click', '.inviteUser', function(){

          var inviteUserID = $(this).children('input').val();

          inviteList.push(inviteUserID)

          $(this).children('span').append("<p class='remove'>&#x2713;</p>");

          if(inviteList.length > 0) {

              document.getElementById('imcSubmitButton').disabled = false;
              $('#imcSubmitButton').css({'opacity':'1'});

          } else {

              document.getElementById('imcSubmitButton').disabled = true;
              $('#imcSubmitButton').css({'opacity':'0.25'});
          }

      });

      $(document).on('click', '.remove', function() {

          inviteList.splice($(this).index(), 1);

          $(this).remove();

      });

});

Answer 1

问题是 inviteList 中的索引与 HTML 中的索引不对应。您应该在 inviteList 中搜索包含该项目的 userID 的元素，并将其拼接出来。

  $(document).on('click', '.remove', function() {
      var userid = $(this).parent().siblings("input").val();
      var index = inviteList.indexOf(userid);
      if (index != -1) {
        inviteList.splice(index, 1);
      }
      $(this).remove();
  });

为了解决记住邀请了哪些用户的问题，可以使用处理 AJAX 响应的代码:

if (inviteList.indexOf(userId) != -1) {
    // Add checkmark
}

如果 inviteList 是一个对象而不是数组，并使用 userid 作为键，事情会更容易。