点击.date类添加.on并移除不同父级下其余.date类的.on类如何实现

问题原因 #

原有代码中使用siblings()方法只能选中与当前被点击元素同父级的兄弟节点，因此只能移除同<tr>内其他.date元素的.on类，无法匹配到其他<tr>下的.date元素。同时对所有.date元素遍历绑定点击事件属于冗余操作，jQuery选择器匹配到的元素集合可直接绑定事件。

正确实现代码 #

$(".date").click(function () {
  // 移除所有带.date类元素的.on类
  $(".date").removeClass("on");
  // 为当前点击的元素添加.on类
  $(this).addClass("on");
});

性能优化方案 #

如果页面内.date元素数量较多，可提前缓存所有.date元素的jQuery对象，避免每次点击都重新查询DOM：

// 提前缓存所有.date元素
const $dateItems = $(".date");
$dateItems.click(function () {
  $dateItems.removeClass("on");
  $(this).addClass("on");
});

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