如何实现基于输入数值的商品价格筛选显示功能？

原代码问题分析 #

原代码的核心逻辑错误在于：

• 把筛选后的价格数组filterResult直接和输入值比较，数组与数值的比较逻辑完全不成立，导致所有卡片的显示判断出错
• 没有建立卡片和对应价格的关联关系，无法针对单个卡片做精准判断

修改后的JavaScript代码 #

const numberInput = document.querySelector("#tentacles");
const sortBtn = document.querySelector('.sort');
const productCards = document.querySelectorAll('.first_card');

sortBtn.addEventListener('click', () => {
    // 将输入值转为数字，避免字符串比较的潜在问题
    const inputPrice = Number(numberInput.value);
    
    productCards.forEach(card => {
        // 获取当前卡片对应的商品价格
        const cardPrice = Number(card.querySelector('[data-prise]').dataset.prise);
        
        // 根据价格判断显示/隐藏卡片
        card.style.display = cardPrice > inputPrice ? 'block' : 'none';
        // 若需要保留卡片布局空间，可替换为：
        // card.style.opacity = cardPrice > inputPrice ? 1 : 0;
    });
});

关键修改说明 #

1. 语义化变量命名：将模糊的变量名（如number、btn）改为更清晰的名称，提升代码可读性
2. 类型转换：强制将输入值和商品价格转为数字类型，避免字符串比较导致的逻辑错误（例如"10000"和"9000"字符串比较会误判）
3. 卡片-价格绑定：遍历每个卡片时，直接从当前卡片内提取价格数据，确保判断逻辑精准对应到单个商品
4. 显示控制优化：使用display: block/none彻底隐藏不符合条件的商品（若需保留布局占位，可换回opacity控制）

可选优化：实时筛选 #

如果希望用户输入数值时自动筛选（无需点击按钮），可以将事件绑定改为input事件：

numberInput.addEventListener('input', () => {
    const inputPrice = Number(numberInput.value);
    
    productCards.forEach(card => {
        const cardPrice = Number(card.querySelector('[data-prise]').dataset.prise);
        card.style.display = cardPrice > inputPrice ? 'block' : 'none';
    });
});

内容的提问来源于stack exchange，提问作者al.orl