如何用JavaScript/jQuery实现Div元素的多条件筛选

问题分析 #

原代码存在几个核心问题导致无法实现组合筛选：

1. 重复使用id="myBtnContainer"，违反HTML唯一ID规则
2. 对非表单元素使用change事件，无法触发筛选逻辑
3. 筛选条件仅单独生效，未做组合判断
4. 使用[class="xxx"]选择器无法匹配多class元素

修正后的筛选区域HTML #

先修复重复ID问题，改用data-value存储筛选值（比原生value更规范）：

<ul class="dropdown-menu option-set" id="cityFilter" data-filter-group="city">
    <li class="selected active filter_btn" data-value="">--Select city---</li>
    <li class="filter_btn" data-value="All">All</li>
    <li class="filter_btn" data-value="Trivan">Trivan</li>
    <li class="filter_btn" data-value="Quli">Quli</li>
</ul>

<ul class="dropdown-menu option-set2" id="attractionFilter" data-filter-group="attraction">
    <li class="selected active filter_btn" data-value="">--Select Attraction---</li>
    <li class="filter_btn" data-value="All">All</li>
    <li class="filter_btn" data-value="Musium">Musium</li>
    <li class="filter_btn" data-value="beach">beach</li>
</ul>

组合筛选jQuery代码 #

将筛选逻辑抽离为独立函数，每次点击筛选器时同时校验两个条件：

// 核心组合筛选逻辑
function applyFilters() {
    // 获取当前选中的两个筛选值
    const selectedCity = $('#cityFilter .active').data('value');
    const selectedAttraction = $('#attractionFilter .active').data('value');

    // 遍历所有目标Div，判断是否同时满足两个条件
    $('.filterDiv').each(function() {
        const $currentDiv = $(this);
        // 城市条件判断：空/All 或 Div包含对应class
        const cityMatch = selectedCity === '' || selectedCity === 'All' || $currentDiv.hasClass(selectedCity);
        // 景点条件判断：逻辑同城市
        const attractionMatch = selectedAttraction === '' || selectedAttraction === 'All' || $currentDiv.hasClass(selectedAttraction);

        // 双条件都满足则显示，否则隐藏
        if (cityMatch && attractionMatch) {
            $currentDiv.addClass('active').show();
        } else {
            $currentDiv.removeClass('active').hide();
        }
    });
}

// 城市筛选器点击事件
$('#cityFilter .filter_btn').click(function() {
    $('#cityFilter .filter_btn').removeClass('active');
    $(this).addClass('active');
    applyFilters();
});

// 景点筛选器点击事件
$('#attractionFilter .filter_btn').click(function() {
    $('#attractionFilter .filter_btn').removeClass('active');
    $(this).addClass('active');
    applyFilters();
});

// 页面加载时初始化筛选状态
$(document).ready(applyFilters);

补充说明 #

• 如果你的样式是通过.active类控制显示（比如.filterDiv:not(.active) { display: none; }），可以移除代码中的.show()和.hide()，仅保留addClass/removeClass('active')即可
• 若需要默认显示所有内容，保持初始选中项为--Select city---和--Select Attraction---即可

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