jQuery点击元素添加CSS并移除其他元素对应样式的实现方法

问题根源 #

1. HTML规范中id属性必须全局唯一，你页面重复使用js-title1、js-title2作为id，jQuery通过id选择器只能匹配到第一个对应元素，无法选中所有相同标识的模块
2. 仅绑定了titleA的点击事件，未处理titleB的点击逻辑，点击titleB无响应

可行实现方案 #

第一步：修改HTML代码，替换重复id为自定义属性

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="wrap">
  <li>
    <a href="javascript:;"  class="demo" data-title-id="1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" data-title-id="2">titleB</a>
  </li>
</ul>

<ul class="wrap-2">
  <li>
    <a href="javascript:;"  class="demo" data-title-id="1">titleA</a>
  </li>
  <li>
    <a href="javascript:;"  class="demo" data-title-id="2">titleB</a>
  </li>
</ul>

第二步：修改JS逻辑，批量绑定事件处理

$('.demo[data-title-id]').on('click', function() {
  // 获取当前点击的标题标识
  const currentTitleId = $(this).data('title-id');
  // 移除所有标题的高亮样式
  $('.demo').removeClass('active');
  // 给所有对应标识的标题添加高亮
  $(`.demo[data-title-id="${currentTitleId}"]`).addClass('active');
})

第三步：CSS代码无需调整，保持原有逻辑即可

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