如何实现多类名组合筛选且同组选项可自动取消选中？

问题根源 #

现有代码未对筛选维度做区分，所有筛选按钮采用统一的多选逻辑，同维度下的选项无法自动互斥切换，因此需要手动取消原有选中项才能切换同维度的其他选项。

修改步骤 #

第一步：调整HTML结构，给按钮组增加维度标识 #

给不同维度的按钮外层容器添加data-filter-type属性，标记当前组所属的筛选维度：

<body>
<!-- 车型维度分组 -->
<div data-filter-type="category">
  <button class="filter-button" type="button" data-filter="all">Show all</button>
  <button class="filter-button" type="button" data-filter="car">car</button>
  <button class="filter-button" type="button" data-filter="bus">bus</button>
</div>
<!-- 颜色维度分组 -->
<div data-filter-type="color">
  <button class="filter-button" type="button" data-filter="all">Show all</button>
  <button class="filter-button" type="button" data-filter="red">Red</button>
  <button class="filter-button" type="button" data-filter="blue">Blue</button>
</div>

<div>
  <p class="filter car red">Red Car</p>
  <p class="filter car blue">Blue Car</p>
  <p class="filter bus red">Red Bus</p>
  <p class="filter bus blue">Blue Bus</p>
</div>
</body>

第二步：替换原有JS逻辑，新增同维度互斥逻辑 #

$(document).ready(function(){
    var targets = $('.filter'),
        buttons = $('.filter-button');
    
    buttons.click(function(){
        var $currentBtn = $(this),
            value = $currentBtn.data('filter'),
            // 获取当前按钮所属的维度
            currentGroup = $currentBtn.closest('[data-filter-type]'),
            groupAllBtn = currentGroup.find('[data-filter="all"]');
        
        // 同维度互斥逻辑
        if(value === 'all'){
            // 点击当前组的全选，清空同组其他选中状态
            currentGroup.find('.filter-button').removeClass('checked');
        }else{
            // 点击普通选项，取消同组全选的选中状态，同时清空同组其他普通选项的选中
            currentGroup.find('.filter-button').removeClass('checked');
            $currentBtn.addClass('checked');
        }

        // 收集所有维度下选中的筛选类
        var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){
            return $(btn).data('filter');
        });

        // 执行筛选
        if(checkedClasses.length === 0){
            targets.show('1000');
        }else{
            var selector = '.' + checkedClasses.join('.'),
                show = targets.filter(selector);
            targets.not(show).hide('3000');
            show.show('3000');
        }
    });
});

核心改动说明 #

• 给不同筛选维度的按钮组增加了分组标识，逻辑上区分不同筛选维度
• 新增同维度互斥逻辑，点击某一维度的选项时，自动取消同维度其他选项的选中状态，无需手动取消
• 简化了筛选判断逻辑，只需要收集所有维度下选中的类名拼接成选择器即可完成多条件叠加筛选

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