如何实现两个匹配多ID的jQuery图库下拉筛选器并修复筛选失效问题

存在两个核心错误导致筛选失效：

1. HTML规范要求id属性不能包含空格，且单个元素只能有一个唯一id，你将两个筛选维度的值用空格拼接塞进id的写法本身不符合语法规范，jQuery的ID选择器也无法正确匹配带空格的id值，这是第二个下拉框筛选时所有内容消失的直接原因。
2. 原有筛选逻辑是单维度覆盖模式，切换任意一个下拉框都会直接覆盖另一个下拉框的筛选结果，没有实现两个筛选条件的联动匹配，无法满足同时按两个维度筛选的需求。

第一步：调整HTML结构，用自定义属性存储筛选维度 #

将分类维度拆分存到data-*自定义属性中，不要把多个值塞到id里：

<!-- the gallery -->
<div id="background">
  <div id="gallery">
    <figure id="pic1" data-age="4-5" data-category="dans" class="pic1">
      <img src="media/fotos/gallery/Dans.png" />
      <figcaption>Dans</figcaption>
    </figure>
    <figure id="pic2" data-age="4-5" data-category="beeldkunst" class="pic2">
      <img src="media/fotos/gallery/Beeldkunst.png" />
      <figcaption>Beeldkunst</figcaption>
    </figure>
    <figure id="pic3" data-age="6-8" data-category="science" class="pic3">
      <img src="media/fotos/gallery/Science.png" />
      <figcaption>Science</figcaption>
    </figure>
  </div>
</div>
<select id='filterText'>
   <option value="all"> Alle leeftijdsgroepen </option>
   <option value="4-5">4-5</option>
   <option value="6-8">6-8</option>
   <option value="8-12">8-12</option>
</select>

<select class='hoofd'>
   <option value="all"> alle hoofdcategorieën </option>
   <option value="dans">dans</option>
   <option value="science">science</option>
   <option value="beeldkunst">beeldkunst</option>
</select>

第二步：重写jQuery逻辑，支持双维度联动筛选 #

同时读取两个下拉框的选中值，同时匹配两个筛选条件：

$(function() {
  // 两个下拉框的变更事件都触发同一个筛选逻辑
  $("#filterText, .hoofd").change(function() {
    const selectedAge = $("#filterText").val();
    const selectedCate = $(".hoofd").val();
    
    $("#background figure").each(function() {
      const currentAge = $(this).data("age");
      const currentCate = $(this).data("category");
      // 值为all时代表对应维度不做筛选限制
      const ageMatch = selectedAge === "all" || currentAge === selectedAge;
      const cateMatch = selectedCate === "all" || currentCate === selectedCate;
      
      ageMatch && cateMatch ? $(this).show() : $(this).hide();
    })
  });
});

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