jQuery点击元素移除同辈元素激活类失效问题排查

嘿，我一眼就看出问题出在哪了——你用的siblings()方法找错对象啦！

为什么原来的代码无效？ #

看你的HTML结构，每个.klantenblokje都被包裹在独立的<div class="col-md-2">容器里。当你在点击事件里调用$(this).siblings()时，它只会查找当前<a>标签的同辈元素（也就是同一个div里的其他元素），但每个div里只有这一个<a>，所以根本碰不到其他.klantenblokje元素，自然没法移除它们的activeblok类。

修正后的代码方案 #

最简单直接的解决方式是：先移除所有.klantenblokje的activeblok类，再给当前点击的元素添加这个类。而且你完全不需要用.each()来绑定事件，jQuery会自动为所有匹配元素绑定点击事件：

$('.klantenblokje').on('click', function(e) {
  e.preventDefault();
  // 先移除所有目标元素的激活类
  $('.klantenblokje').removeClass('activeblok');
  // 给当前点击的元素添加激活类
  $(this).addClass('activeblok');
});

如果想优化性能（避免每次点击都重新查找DOM），可以提前缓存所有目标元素：

// 缓存所有klantenblokje元素
const $klantenItems = $('.klantenblokje');

$klantenItems.on('click', function(e) {
  e.preventDefault();
  $klantenItems.removeClass('activeblok');
  $(this).addClass('activeblok');
});

额外小技巧（不推荐但可以理解原理） #

如果你非要用同辈元素的思路来实现，那得先找到当前元素父容器的同辈，再定位到里面的.klantenblokje：

$('.klantenblokje').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('activeblok')
         // 找到父容器的所有同辈容器
         .parent().siblings()
         // 在这些容器里找到klantenblokje并移除类
         .find('.klantenblokje').removeClass('activeblok');
});

不过这种写法绕了个弯，不如直接选中所有目标元素来得直观，所以更推荐前面的方案。

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