如何用jQuery同时通过类名与data-id定位并切换指定元素？

你的问题很明确——当前代码会选中所有匹配data-id的元素，包括你点击的.group本身，所以才会出现点击元素消失的情况。我们只需要缩小选择器的范围，精准定位到同时拥有.groupMessages类和对应data-id的元素即可。

修正后的代码 #

直接在选择器里同时指定类名和属性条件：

$(document).ready(function(){
  $('.group').click(function(){
    // 组合选择器：只选中带有groupMessages类且data-id匹配的元素
    $('.groupMessages[data-id="' + $(this).data('id') + '"]').toggle();
  })
});

或者用更清晰的链式写法（可读性更好，尤其适合复杂筛选）：

$(document).ready(function(){
  $('.group').click(function(){
    const currentId = $(this).data('id');
    // 先选中所有groupMessages，再筛选出对应data-id的元素
    $('.groupMessages').filter(`[data-id="${currentId}"]`).toggle();
  })
});

为什么这样改？ #

原来的选择器$('[data-id="X"]')会匹配页面上所有带有该data-id的元素，包括你的.group点击源。而我们需要的是：

• 必须拥有.groupMessages类（目标消息容器）
• 同时data-id和点击的.group元素一致

通过组合类选择器和属性选择器，就完美限定了目标范围，不会误操作到点击的.group元素了。结合你的EJS模板结构，每个group循环生成的.group元素和对应的.groupMessages元素共享同一个data-id，这样修改后点击分组，就只会切换对应的消息区域啦。

内容的提问来源于stack exchange，提问作者MrG