JavaScript 多维过滤：实现复杂条件下的产品筛选

<div>
  <h3>颜色</h3>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="red">红色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="green">绿色</label>
  <label><input type="checkbox" class="filter-checkbox color-checkbox" value="blue">蓝色</label>
</div>
<div>
  <h3>尺寸</h3>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="small">小</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="medium">中</label>
  <label><input type="checkbox" class="filter-checkbox size-checkbox" value="large">大</label>
</div>

<div>
  <h1>筛选结果</h1>
  <!-- filterable 元素使用 data-colors 属性存储其颜色和尺寸信息 -->
  <div class="filterable" data-colors="blue large">产品 A</div>
  <div class="filterable" data-colors="green small">产品 B</div>
  <div class="filterable" data-colors="red medium">产品 C</div>
  <div class="filterable" data-colors="red large">产品 D</div>
</div>

const filterCheckboxes = document.querySelectorAll('.filter-checkbox');
const colorCheckboxes = document.querySelectorAll('.color-checkbox');
const sizeCheckboxes = document.querySelectorAll('.size-checkbox');
const filterables = document.querySelectorAll('.filterable');

function updateFilter() {
  // 1. 获取当前选中的颜色和尺寸过滤器值
  const colorChecked = Array.from(colorCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  const sizeChecked = Array.from(sizeCheckboxes)
    .filter(checkbox => checkbox.checked)
    .map(checkbox => checkbox.value);

  // 2. 处理无任何过滤器被选中的情况：显示所有产品
  if (!(colorChecked.length || sizeChecked.length)) {
    filterables.forEach(filterable => {
      filterable.style.display = 'block';
    });
    return; // 结束函数执行
  }

  // 3. 遍历所有可筛选产品，应用过滤逻辑
  filterables.forEach(filterable => {
    // 解析产品的颜色和尺寸属性
    // 假定 data-colors 格式为 "颜色 尺寸"
    const productAttributes = filterable.dataset.colors.split(' ');
    const productColor = productAttributes[0];
    const productSize = productAttributes[1];

    let shouldDisplay = false;

    // 4. 判断过滤逻辑：
    // 如果颜色和尺寸两组过滤器都有选中项，则应用“与”逻辑
    if (colorChecked.length >= 1 && sizeChecked.length >= 1) {
      shouldDisplay = colorChecked.includes(productColor) && sizeChecked.includes(productSize);
    }
    // 否则（只有颜色或只有尺寸过滤器有选中项，或两者都没有，但这种情况已在步骤2处理），
    // 则应用“或”逻辑（即只要产品符合任一已选的颜色或尺寸即可）
    else {
      shouldDisplay = colorChecked.includes(productColor) || sizeChecked.includes(productSize);
    }

    // 5. 根据判断结果显示或隐藏产品
    if (shouldDisplay) {
      filterable.style.display = 'block';
    } else {
      filterable.style.display = 'none';
    }
  });
}

// 6. 为所有过滤器添加事件监听器
filterCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', updateFilter);
});

// 7. 页面加载时执行一次初始过滤
updateFilter();