JavaScript多条件（颜色/尺寸/价格）过滤功能修复求助

问题分析 #

你的价格过滤异常，核心原因是原逻辑没把价格维度和颜色、尺寸的条件做正确的多条件组合判断——需要让三个过滤维度形成且关系：商品必须同时满足所有已选中的过滤条件，未选中的维度不参与过滤。

修复思路 #

1. 分别抓取三个维度的选中值：
   • 颜色：获取所有勾选的颜色复选框值，为空则不限制颜色
   • 尺寸：获取所有勾选的尺寸复选框值，为空则不限制尺寸
   • 价格：获取选中的价格下拉框值，为默认选项则不限制价格
2. 对每个商品做多条件校验：
   • 颜色匹配：商品颜色在选中列表中，或颜色列表为空
   • 尺寸匹配：商品尺寸在选中列表中，或尺寸列表为空
   • 价格匹配：商品价格等于选中值，或未选择价格
3. 仅显示同时满足三个匹配条件的商品，其余隐藏

修改后的完整代码 #

HTML代码（适配你的需求结构，可根据实际调整）

<!-- 过滤控件 -->
<div class="filters">
  <h3>颜色过滤</h3>
  <label><input type="checkbox" class="color-filter" value="red">红色</label>
  <label><input type="checkbox" class="color-filter" value="green">绿色</label>
  <label><input type="checkbox" class="color-filter" value="blue">蓝色</label>

  <h3>尺寸过滤</h3>
  <label><input type="checkbox" class="size-filter" value="small">Small</label>
  <label><input type="checkbox" class="size-filter" value="medium">Medium</label>
  <label><input type="checkbox" class="size-filter" value="large">Large</label>

  <h3>价格过滤</h3>
  <select class="price-filter">
    <option value="">全部价格</option>
    <option value="$20">$20</option>
    <option value="$30">$30</option>
    <option value="$40">$40</option>
  </select>
</div>

<!-- 商品列表 -->
<div class="products">
  <div class="product" data-color="red" data-size="small" data-price="$20">Product A</div>
  <div class="product" data-color="green" data-size="medium" data-price="$30">Product B</div>
  <div class="product" data-color="blue" data-size="medium" data-price="$20">Product C</div>
</div>

JavaScript代码

// 获取控件与商品元素
const colorCheckboxes = document.querySelectorAll('.color-filter');
const sizeCheckboxes = document.querySelectorAll('.size-filter');
const priceSelect = document.querySelector('.price-filter');
const products = document.querySelectorAll('.product');

// 绑定过滤触发事件
colorCheckboxes.forEach(cb => cb.addEventListener('change', filterProducts));
sizeCheckboxes.forEach(cb => cb.addEventListener('change', filterProducts));
priceSelect.addEventListener('change', filterProducts);

function filterProducts() {
  // 整理选中的颜色
  const selectedColors = Array.from(colorCheckboxes)
    .filter(cb => cb.checked)
    .map(cb => cb.value);
  
  // 整理选中的尺寸
  const selectedSizes = Array.from(sizeCheckboxes)
    .filter(cb => cb.checked)
    .map(cb => cb.value);
  
  // 获取选中的价格
  const selectedPrice = priceSelect.value;

  // 遍历商品做条件校验
  products.forEach(product => {
    const prodColor = product.dataset.color;
    const prodSize = product.dataset.size;
    const prodPrice = product.dataset.price;

    // 各维度匹配逻辑
    const colorMatch = selectedColors.length === 0 || selectedColors.includes(prodColor);
    const sizeMatch = selectedSizes.length === 0 || selectedSizes.includes(prodSize);
    const priceMatch = !selectedPrice || prodPrice === selectedPrice;

    // 多条件同时满足则显示
    product.style.display = colorMatch && sizeMatch && priceMatch ? 'block' : 'none';
  });
}

验证说明 #

代码完全匹配你的需求：

• 未选颜色和尺寸时，仅显示符合所选价格的商品
• 选择绿色+$20时，无商品同时满足两个条件，因此无结果
• 未选颜色、选中Medium+Large且选$20时，仅显示Product C

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