JQuery/Javascript点击事件后如何获取点击对象值？解决active类延迟问题

需求 #

点击列表项时，为该列表项添加“active”类，同时将其data-value和data-filter属性的值存入filterobj对象。

遇到的问题 #

点击操作已成功为列表项添加“active”类，但只能在第二次点击时获取上一次点击的active类项的值，无法在同一次点击中获取当前点击项的对应值，如何解决？

代码示例 #

JavaScript代码 #

$(document).ready(function() {
  $('.sidebar-filter').on('click', function(event) {
    /**$('.sidebar-filter').addClass("active");*/
    event.preventDefault();
    var filterobj = {};
    $(" .sidebar-filter").each(function(index, ele) {
      var filterval = $(this).data("value");
      var filterkey = $(this).data('filter');
      // ('li[data-filter=' + filterkey+'].active')).map(function(el){
      filterobj[filterkey] = Array.from(document.querySelectorAll('li[data-filter=' + filterkey + '].active')).map(function(el) {
        /**return $(el).data("value");*/
        return $(el).data("value")
        /** return el.getAttribute('data-value');*/
      });
    });
  });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<ul>
  <li class="thread-filter filter-items " data-filter="network" data-value="9">
    <a href="#">name</a>
  </li>
  <li class="thread-filter filter-items " data-filter="network" data-value="1">
    <a href="#">name</a>
  </li>
  <li class="thread-filter filter-items " data-filter="network" data-value="2">
    <a href="#">name</a>
  </li>
</ul>

<ul>
  <li class="thread-filter filter-items " data-filter="signal" data-value="9">
    <a href="#">name</a>
  </li>
  <li class="thread-filter filter-items " data-filter="signal" data-value="1">
    <a href="#">name</a>
  </li>
  <li class="thread-filter filter-items " data-filter="signal" data-value="2">
    <a href="#">name</a>
  </li>
</ul>

问题核心是执行顺序错误：你先尝试收集带active类的元素数据，再给当前点击项添加active类（甚至原代码里添加类的逻辑被注释了），导致第一次点击时，当前项还没更新状态，自然无法被捕获。

修正步骤 #

1. 先修正选择器匹配问题：原JS用.sidebar-filter绑定事件，但HTML列表项的类是thread-filter filter-items，两者不匹配，先统一选择器。
2. 调整执行顺序：先修改DOM（添加/切换active类），再收集数据，确保当前点击项的状态已更新。
3. 优化数据收集逻辑：直接遍历所有带active类的元素，按data-filter分组存入数组，更高效。

修正后的代码 #

$(document).ready(function() {
  // 统一选择器为HTML中实际存在的类
  $('.thread-filter').on('click', function(event) {
    event.preventDefault();
    
    // 第一步：先给当前点击项切换active类（多选场景，单选场景可调整逻辑）
    $(this).toggleClass('active');
    
    var filterobj = {};
    // 遍历所有active状态的列表项，按data-filter分组收集data-value
    $('.thread-filter.active').each(function() {
      var filterKey = $(this).data('filter');
      var filterValue = $(this).data('value');
      
      // 初始化数组，避免出现undefined
      if (!filterobj[filterKey]) {
        filterobj[filterKey] = [];
      }
      filterobj[filterKey].push(filterValue);
    });
    
    // 测试输出，验证结果
    console.log(filterobj);
  });
});

单选场景适配（同一filter组仅能选一个） #

如果需要实现单选逻辑，把切换类的代码替换为：

var currentFilter = $(this).data('filter');
// 移除同filter组所有项的active类
$(`.thread-filter[data-filter="${currentFilter}"]`).removeClass('active');
// 给当前点击项添加active类
$(this).addClass('active');

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