使用jQuery实现点击表格表头箭头加类、移除其余箭头同类的问题

问题分析 #

现有代码的问题在于$(this).siblings()只能选中当前箭头所属的同一父容器下的同级元素，也就是仅能清除同个列里另一个箭头的高亮类，无法匹配其他表头列里的所有排序箭头。

解决方案 #

点击触发时先清除所有排序箭头的text-primary类，再给当前点击的箭头添加高亮类即可，同时记得把向上箭头的点击事件也纳入绑定：

// 同时绑定上下箭头的点击事件
$('body').on('click', '.i-con-arrow-down, .i-con-arrow-up', function() {
  // 第一步：清除所有排序箭头的高亮类
  $('.i-con-arrow-down, .i-con-arrow-up').removeClass('text-primary');
  // 第二步：给当前点击的箭头加高亮
  $(this).addClass('text-primary');
  // 后续可补充排序业务逻辑
});

如果页面存在多个带排序功能的表格，想避免样式互相影响，可以缩小选择器范围，先定位到当前所属表格再操作：

$('body').on('click', '.i-con-arrow-down, .i-con-arrow-up', function() {
  // 仅清除当前表格内所有排序箭头的高亮，不影响其他表格
  $(this).closest('table').find('.i-con-arrow-down, .i-con-arrow-up').removeClass('text-primary');
  $(this).addClass('text-primary');
});

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