基于HTML的多选框商品过滤器代码故障排查求助

原代码核心问题 #

• 选择器不匹配：原代码用.row > div获取商品条目，但页面无.row元素，实际商品都在#items下的.column容器中；筛选器选择器.filter input.models:checked中的.models类不存在，应直接选中筛选区的复选框。
• 类名格式非法：商品条目的类名使用#MEDICAL#格式，#不属于合法CSS类名开头，导致无法正确识别类别。
• 数组方法错误：JavaScript原生无Array.inArray()方法，检查元素类名需用classList.contains()。
• ALL选项逻辑缺失：原代码中ALL复选框的rel为空，未处理“显示全部商品”的逻辑。

修正后的完整代码 #

<div class="filter">
    <h1>Select products</h1> 
    <div class="checkbox"> <label><input type="checkbox" rel="ALL" onchange="change();" checked="checked" />ALL</label> </div>
    <div class="checkbox"> <label><input type="checkbox" rel="TABLET" onchange="change();" />TABLET</label> </div>
    <div class="checkbox"> <label><input type="checkbox" rel="MEDICAL" onchange="change();" />MEDICAL</label> </div>
    <div class="checkbox">  <label><input type="checkbox" rel="TISANE_NATUREL" onchange="change();" />TISANE NATUREL</label> </div>
</div>

<div id="items">
    <div class="column MEDICAL TABLET">
        <div class="content">
            <h4>XLS MEDICAL - COMPRIME [FAT REDUCER] {120}</h4>
            <p style="color:blue">Product Ref.: 4384145</p>
            <p style="color:blue">Product Barcode: 5400951001098</p>
        </div>
    </div>

    <div class="column MEDICAL TABLET">
        <div class="content">
            <h4>XLS MEDICAL - COMPRIME [MAX STRENGTH] {120}</h4>
            <p style="color:blue">Product Ref.: 3214897</p>
            <p style="color:blue">Product Barcode: 5414963013147</p>
        </div>
    </div>

    <div class="column TISANE_NATUREL">
        <div class="content">
            <h4>XLS MEDICAL - TISANE [FROID] {20}</h4>
            <p style="color:blue">Product Ref.: 3045382</p>
            <p style="color:blue">Product Barcode: 5412141225559</p>
        </div>
    </div>
</div>

<script>
function change() {
    // 获取所有商品条目
    let results = Array.from(document.querySelectorAll('#items .column')),
        // 获取所有选中的复选框
        selectedFilters = Array.from(document.querySelectorAll('.filter input[type="checkbox"]:checked'));

    // 先隐藏所有条目
    results.forEach(result => result.style.display = 'none');

    // 检查是否选中ALL
    const hasAll = selectedFilters.some(filter => filter.getAttribute('rel') === 'ALL');
    if (hasAll) {
        // 显示所有条目
        results.forEach(result => result.style.display = 'block');
        return;
    }

    // 根据选中的筛选条件显示对应条目
    selectedFilters.forEach(filter => {
        const category = filter.getAttribute('rel');
        results.forEach(item => {
            if (item.classList.contains(category)) {
                item.style.display = 'block';
            }
        });
    });
}

// 页面加载时执行一次
change();
</script>

关键修改说明 #

1. 修正类名格式：将#MEDICAL#改为MEDICAL，#TISANE NATUREL#改为TISANE_NATUREL（类名不能包含空格，用下划线替代）。
2. 修正选择器：用#items .column定位商品条目，用.filter input[type="checkbox"]:checked获取选中的筛选框。
3. 替换数组方法：用classList.contains()替代不存在的Array.inArray()，实现类别匹配检查。
4. 完善ALL选项逻辑：判断ALL复选框是否选中，若选中则直接显示所有商品，跳过其他筛选逻辑。
5. 处理带空格的类别：将TISANE NATUREL的rel属性改为TISANE_NATUREL，避免类名含空格导致的识别问题。

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