修复foreach循环中jQuery点击元素误删所有active类的问题

当前通过Laravel Blade循环渲染的用户列表项，点击某一.userlink元素时，所有带有该类的元素的active类都会被移除，而需求是仅移除点击元素自身的active类。

问题根源分析 #

原jQuery代码中，$('.userlink').removeClass('active');这行代码会选中页面上所有.userlink元素并移除active类，这是导致批量移除的核心原因；后续的判断逻辑if (!$this.hasClass('active')) { $this.removeClass('active'); }逻辑混乱，无实际作用。

修复后的jQuery代码 #

$('.userlink').click(function(e) {
  e.preventDefault();
  var id = $(this).data("id");
  var token = $("meta[name='csrf-token']").attr("content");
  
  // 仅对当前点击的元素移除active类
  $(this).removeClass('active');
});

额外说明 #

如果你的实际需求是点击元素时，其他元素移除active类，当前元素切换active类（常见的tab切换逻辑），可以使用以下代码：

$('.userlink').click(function(e) {
  e.preventDefault();
  var id = $(this).data("id");
  var token = $("meta[name='csrf-token']").attr("content");
  
  // 移除所有.userlink的active类
  $('.userlink').removeClass('active');
  // 给当前点击的元素添加active类
  $(this).addClass('active');
});

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