为什么这会在列表组项上打开(“单击”）后保留以前单击的 ID

Why does this retain previously clicked ids after on('click') on a list-group-item?

本文关键字：单击 保留 ID 列表 为什么      更新时间：2023-09-26

我的聊天室代码中有以下部分：

.HTML 

<div class="list-group">
  <a class="list-group-item" id="1" href="#">Group A</a>
  <a class="list-group-item" id="2" href="#">Group B</a>
  <a class="list-group-item" id="3" href="#">Group C</a>
  <a class="list-group-item" id="4" href="#">Group D</a>
</div>
<div class="message_box">
  <form action="#" class="form">
    <div class="form-group"></div>
    <div class="input-group">
      <textarea class="form-control message_text emojiable-message"
                name="message_text" id="message_text" rows="3"></textarea>
      <span class="input-group-addon btn btn-primary send_message_btn" name="send_message_btn"
            >
        Send
      </span>
    </div>
  </form>
</div>

jQuery

$(document).ready(function () {
    $('#groups a.list-group-item').on('click', function () {
    $(this).toggleClass("active");
        $(this).siblings().removeClass("active");
        //chage the textarea and btn id to single user.
        $('.send_message_btn').removeAttr('id');
        $('.send_message_btn').attr('id', 'send_to_topic');
        var selected_group_id = this.id;
        //Handle enter key press and mouse click (group)
        $('#send_to_topic').click(function(e) {
            alert(selected_group_id);
            //sendChatMessage(selected_group_id);
            return false;
        });
        $('#message_text').keydown(function(e) {
            if (e.keyCode == 13) {
                alert(selected_group_id);
                //sendChatMessage(selected_group_id);
                return false;
            }
        });
        $(this).removeClass('active');
        $(this).removeAttr('id');
  });
});

问题是当我选择几个列表组项目然后点击发送按钮时，alert(selected_group_id);打印我选择的所有项目的 ID。我只想选择要在sendChatMessage(selected_group_id);中使用的最后一个选定项目。如果有人能指出我哪里出了问题，那就太好了。谢谢。

编辑。 主要问题是当我点击发送时，消息会重复传递（我在发送之前选择的所有列表组项目 ID 的数量）。如果我只选择一个组并发送消息不会重复（这没关系。

稍微修改了你的HTML和JS代码，它在这里工作。请看一看。

$(document).ready(function() {
  $('a.list-group-item').on('click', function() {
    $(this).toggleClass("active");
    $(this).siblings().removeClass("active");
  });
  //Handle enter key press and mouse click (group)
  $('#send_to_topic').click(function(e) {
    var selected_group_id = $(".list-group .active").attr("id");
    alert(selected_group_id);
    return false;
  });
  $('#message_text').keydown(function(e) {
    if (e.keyCode == 13) {
      var selected_group_id = $(".list-group .active").attr("id");
      alert(selected_group_id);
      //sendChatMessage(selected_group_id);
      return false;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-group">
  <a class="list-group-item" id="1" href="#">Group A</a>
  <a class="list-group-item" id="2" href="#">Group B</a>
  <a class="list-group-item" id="3" href="#">Group C</a>
  <a class="list-group-item" id="4" href="#">Group D</a>
</div>
<div class="message_box">
  <form action="#" class="form">
    <div class="form-group"></div>
    <div class="input-group">
      <textarea class="form-control message_text emojiable-message" name="message_text" id="message_text" rows="3"></textarea>
      <span class="input-group-addon btn btn-primary send_message_btn" name="send_message_btn" id="send_to_topic">
        Send
      </span>
    </div>
  </form>
</div>

正如vijayP所建议的那样，你的$('#send_to_topic').click()和$('#message_text').keydown()应该生活在$('#groups a.list-group-item').click()事件之外。

接下来，由于您的selected_group_id变量是使用 var 关键字声明的，因此$('#groups a.list-group-item').click()范围之外的函数无法访问它。所以你应该在所有这些事件之外声明这个变量，如下所示：

jQuery 

$(document).ready(function () {
    // Declare the selected_group_id outside of the events so they can access to it
    var selected_group_id;
    $('#groups a.list-group-item').on('click', function () {
        $(this).toggleClass("active");
        $(this).siblings().removeClass("active");
        //chage the textarea and btn id to single user.
        $('.send_message_btn').removeAttr('id');
        $('.send_message_btn').attr('id', 'send_to_topic');
        selected_group_id = this.id;
        $(this).removeClass('active');
        $(this).removeAttr('id');
    });
    //Handle enter key press and mouse click (group)
    $('#send_to_topic').click(function(e) {
        alert(selected_group_id);
        //sendChatMessage(selected_group_id);
        return false;
    });
    $('#message_text').keydown(function(e) {
        if (e.keyCode == 13) {
            alert(selected_group_id);
            //sendChatMessage(selected_group_id);
            return false;
        }
    });
});
相关文章：