JavaScript多条件筛选问题：Leaflet标记无法动态组合筛选

我知道平台上有很多类似问题，但都没能帮我解决（或许我找的解释不对）。我有一个存储对象的itemArray，还有一个包含带值和分类名称复选框的checkboxesArray。用Leaflet地图展示itemArray里所有对象的标记，想通过勾选复选框筛选。目前单独按国家或作物筛选可以实现，但没法动态组合筛选：选一个作物后再选国家，看不到该作物在对应国家的条目，反之亦然；现在的代码只有同时选中国家和作物才显示标记，单独选其一返回空数组。

现有错误代码 #

checkBoxesArray.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    markerGroup.clearLayers();
    const values = checkBoxesArray
      .filter(checkbox => checkbox.checked)
      .map(checkbox => checkbox.value)
    filteredEntries = entries.filter(feature => {
      return (values.includes(feature.crops)) && (values.includes(feature.country) && values.includes(feature.crops))
    })
    addPopups(filteredEntries)
    if (checkBoxesArray.every(box => !box.checked)) {
      showAmountOfEntries(entries)
      addPopups(entries)
      filteredEntries = entries
    } else {
      showAmountOfEntries(filteredEntries)
    }
    console.log(filteredEntries)
  });
});

问题根源与修复代码 #

你的筛选逻辑逻辑错误——现在的代码要求feature.crops和feature.country必须同时出现在选中的values里，这就导致必须同时选中国家和作物才会有结果。

正确逻辑应该是：只要条目作物或国家匹配任意选中的复选框就保留；如果同时选中作物和国家，那条目必须同时满足作物匹配其中一个、国家匹配其中一个。

首先给每个复选框加data-category属性区分类型（值为crops或country），再修改筛选逻辑：

checkBoxesArray.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    markerGroup.clearLayers();
    
    // 分别收集选中的作物和国家
    const selectedCrops = checkBoxesArray
      .filter(box => box.checked && box.dataset.category === 'crops')
      .map(box => box.value);
    const selectedCountries = checkBoxesArray
      .filter(box => box.checked && box.dataset.category === 'country')
      .map(box => box.value);

    filteredEntries = entries.filter(feature => {
      // 无选中作物则默认通过，有选中则判断匹配；国家同理
      const matchesCrop = selectedCrops.length === 0 || selectedCrops.includes(feature.crops);
      const matchesCountry = selectedCountries.length === 0 || selectedCountries.includes(feature.country);
      return matchesCrop && matchesCountry;
    });

    addPopups(filteredEntries);
    showAmountOfEntries(filteredEntries);

    // 全不选时显示所有条目
    if (checkBoxesArray.every(box => !box.checked)) {
      filteredEntries = entries;
      addPopups(entries);
      showAmountOfEntries(entries);
    }

    console.log(filteredEntries);
  });
});

关键说明 #

• 给复选框添加分类属性，示例HTML：

  <input type="checkbox" value="小麦" data-category="crops">小麦
  <input type="checkbox" value="中国" data-category="country">中国
  

• 筛选逻辑中，某类条件无选中时默认通过，有选中时判断匹配，这样就能实现任意组合筛选：单独选作物、单独选国家、同时选两者都能正常工作。

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