Jquery中addClass与removeClass切换问题：无法移除前一项选中样式

点击带有id前缀ev-chat_的列表组项时，会获取数据库中的amici_id并为当前项添加active-plus类，但点击新的列表项时，无法使用removeClass()移除前一个选中项的active-plus类，请问该如何解决？

HTML/PHP 代码 #

$query_logo = "SELECT `ph_banner` FROM `fli_foto_utente` WHERE `id-utente`= '" . $id_utente . "'";
$rs_logo = mysql_query ($query_logo, $conn);
$check_foto = false;
while( $rows_logo = mysql_fetch_assoc($rs_logo) ) {
  if ( $rows_logo['ph_banner'] == 'logo' ) {
    $check_foto = true;
  }
}
$img_user = "assets/img/user.png";

if ( $check_foto ) {
  $img_user = "assets/upload/foto_utente/id_ph_" . $id_utente . "/" . $rows_logo['foto-utente'];      
} else {
  switch ( $rows_utente['genere'] ) {
    case 'maschile':
      $img_user = "assets/img/man.png";
      break;
    case 'femminile':
      $img_user = "assets/img/girl.png";
      break;
    case 'altro':
    default:
      $img_user = "assets/img/user.png";
      break; 
  }
}
?>

<a href="#" class="list-group-item list-group-item-action" id="ev-chat_<?php echo $rows_amici['amici_id']; ?>" data-id_amici="<?php echo $rows_amici['amici_id']; ?>">          
  <span class="chat-img"> <img src="<?php echo $img_user; ?>" alt="" class="img-fluid" ></span> <?php echo $nomeandcogn; ?>
</a>

<?php 
}

原JQuery代码 #

$('[id*="ev-chat_"]').click(function() {

  var clickCount = 0;

  var id_amici = $(this).data("id_amici");      
  
  $('#ev-chat_' + idamici).removeClass("active-plus");      

  clickCount++;

  if (clickCount != String(1)) {
    $('#ev-chat_' + id_amici).prev().removeClass('active-plus');

  }else if (clickCount == String(1)){

    $('#ev-chat_' + id_amici).addClass('active-plus');
  }

 });

解决方案 #

原代码存在两个核心问题：

1. 变量名拼写错误 #

你定义的变量是id_amici，但移除类时写成了idamici，导致选择器$('#ev-chat_' + idamici)无法匹配到任何元素，自然无法移除类。

2. clickCount逻辑完全无效 #

每次点击事件触发时，clickCount都会被重置为0，之后自增为1，所以永远只会执行else if分支，而且用点击次数来判断选中状态的思路完全错误——我们需要的是每次点击新项时，先移除所有已选中项的active-plus类，再给当前项添加类，或者精准定位前一个选中项。

修正后的JQuery代码 #

$('[id*="ev-chat_"]').click(function() {
  // 1. 移除所有带有active-plus类的聊天项
  $('[id*="ev-chat_"].active-plus').removeClass('active-plus');
  // 2. 给当前点击的项添加active-plus类
  $(this).addClass('active-plus');
  
  // 保留业务逻辑：获取amici_id
  var id_amici = $(this).data("id_amici");
  // 后续业务处理...
});

更高效的写法（如果所有聊天项有共同父容器） #

如果这些列表项都在同一个父容器内（比如<div class="chat-list">），可以缩小选择范围，提升性能：

$('.chat-list [id*="ev-chat_"]').click(function() {
  // 只在父容器内查找选中项
  $(this).closest('.chat-list').find('[id*="ev-chat_"].active-plus').removeClass('active-plus');
  $(this).addClass('active-plus');
  
  var id_amici = $(this).data("id_amici");
  // 后续业务处理...
});

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