基于单选框的jQuery筛选嵌套下拉菜单时失效问题排查

问题场景 #

将筛选选项移入下拉菜单后，卡片不再响应筛选条件（例如选择"closed"时无法仅显示data-status="closed"的卡片），疑问点：filter-data类的jQuery代码中this上下文是否正确？是否存在目标定位错误？

问题排查 #

1. this上下文是正确的
   在$('.filter-data').on('change', 'input[type=radio]', function() {})中，this确实指向触发change事件的单选按钮，能正确获取到name和value属性，这部分逻辑没有问题。

2. 核心问题：缺少实际的卡片显示/隐藏逻辑
   现有代码仅给.cards元素设置了data-status-match属性，但完全没有根据这个属性值去筛选卡片的逻辑——既没有判断卡片的data-status是否匹配筛选值，也没有执行显示/隐藏操作。

3. 目标定位错误

   • 现有HTML中没有.cards容器元素，但代码里多次使用$('.cards')进行操作，选择器无法匹配到目标元素。
   • 卡片的data-status属性在.card-wrapper上，但代码里统计可见卡片时用的是$('.cards .card:visible')，层级匹配错误。

解决方案 #

1. 调整HTML结构（添加卡片容器） #

给所有卡片包裹一个.cards容器，确保选择器能匹配：

<div class="cards">
    <div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="open">
        <div class="card">
            <div>Testing content (Open)</div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6 col-xl-4 mb-3 card-wrapper" data-status="closed">
        <div class="card">
            <div>Testing content (Closed)</div>
        </div>
    </div>
</div>

2. 修复并完善筛选逻辑 #

添加卡片显示/隐藏的核心代码，同时合并重复的change事件监听，避免冲突：

$(document).ready(function() {

    // 合并筛选逻辑与下拉按钮状态更新
    $('.filter-data').on('change', 'input[type=radio]', function() {
        var filtername = $(this).attr('name');
        var filtervalue = $(this).val();
        var $cardsContainer = $('.cards');
        
        // 执行卡片筛选逻辑
        $cardsContainer.find('.card-wrapper').each(function() {
            var cardStatus = $(this).attr('data-' + filtername);
            if (filtervalue === 'all' || cardStatus === filtervalue) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });

        // 更新容器属性与可见数量
        $cardsContainer.attr('data-' + filtername + '-match', filtervalue);
        $cardsContainer.attr('data-visible-count', $cardsContainer.find('.card-wrapper:visible').length);

        // 更新下拉按钮状态与文本
        var dropdown = $(this).closest('.dropdown');
        var thislabel = $(this).closest('label');
        dropdown.find('label').removeClass('active');
        if ($(this).is(':checked')) {
            thislabel.addClass('active');
            dropdown.find('ins').html(thislabel.text());
        }
    });

    // 添加tabindex与键盘导航
    $('label.dropdown-item').each(function() {
        $(this).attr('tabindex', 0);
        $(this).find('input').attr('tabindex', -1);
    });

    $('label.dropdown-item').keypress(function(e) {
        if ((e.keyCode ? e.keyCode : e.which) == 13) {
            $(this).trigger('click');
        }
    });
});

关键修复点说明 #

• 新增了遍历.card-wrapper并根据筛选值显示/隐藏的逻辑
• 修正了可见卡片数量统计的选择器（从.card:visible改为.card-wrapper:visible）
• 合并了原来两个独立的change事件，避免事件重复触发导致的逻辑混乱
• 确保$('.cards')能匹配到实际的卡片容器

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