如何在多個 id 上制作 2 個 jquery 下拉過濾器

Question

你怎么能制作2個可以過濾畫廊的下拉菜單。 所有帶有圖像的 div 都有兩個下拉列表的多個 id，但是在我向 id 添加名稱后過濾器不再工作。 第二個下拉列表沒有過濾，而是在選擇一個選項時所有內容都消失了。
謝謝！
編碼：

<!-- the gallery -->
<div id="background">
  <div id="gallery">
    <figure id="4-5 dans" class="pic1">
      <img src="media/fotos/gallery/Dans.png" />
      <figcaption>Dans</figcaption>
    </figure>
    <figure id="4-5 beeldkunst" class="pic2">
      <img src="media/fotos/gallery/Beeldkunst.png" />
      <figcaption>Beeldkunst</figcaption>
    </figure>
    <figure id="6-8 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>

<!-- the jquery -->

$(function() {
  $("#filterText").change(function() {
    var rex = $('#filterText').val();
    if (rex != "all") $("#background figure").show().not('#' + rex).hide();
    else $("#background figure").show();
  });
});

$(function() {
  $(".hoofd").change(function() {
    var rex = $('.hoofd').val();
    if (rex != "all") $("#background figure").show().not('#' + rex).hide();
    else $("#background figure").show();
  });
});
</script>

Answer 1

每個元素只能有一個 ID，但確實可以有多個類。 但是不要有多個類屬性； 將多個類值放入一個屬性中

這是工作演示，希望它可以幫助您實現您想要的。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- the gallery --> <div id="background"> <div id="gallery"> <figure id="4-5_dans" class="pic1"> <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" /> <figcaption>Dans</figcaption> </figure> <figure id="4-5_beeldkunst" class="pic2"> <img src="https://pe-images.s3.amazonaws.com/basics/cc/image-size-resolution/resize-images-for-print/image-cropped-8x10.jpg" /> <figcaption>Beeldkunst</figcaption> </figure> <figure id="6-8_science" class="pic3"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx4Ej3sddJTqtqN48tLwfcukxY-e70Aev4Dw&usqp=CAU" /> <figcaption>Science</figcaption> </figure> </div> </div> <select id='filterText'> <option value="all"> Alle leeftijdsgroepen </option> <option value="4-5_dans">4-5</option> <option value="4-5_beeldkunst">6-8</option> <option value="6-8_science">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> <!-- the jquery --> <script> $(function() { $("#filterText").change(function() { var rex = $('#filterText').val(); if (rex != "all") $("#background figure").show().not('#' + rex).hide(); else $("#background figure").show(); }); }); $(function() { $(".hoofd").change(function() { var rex = $('.hoofd').val(); if(rex=="dans") { rex="4-5_dans"; }else if(rex == "science") { rex="6-8_science"; }else if(rex == "beeldkunst") { rex="4-5_beeldkunst"; } if (rex != "all") $("#background figure").show().not('#' + rex).hide(); else $("#background figure").show(); }); }); </script>

Answer 2

 $(function() { $("#filterText").change(function() { var rex = $('#filterText').val(); console.log(rex); switch (rex) { case "all": $("figure").show(); break; case "4-5": $("figure").hide(); $("#4-5_dans").show(); break; case "6-8": $("figure").hide(); $("#6-8_science").show(); break; case "8-12": $("figure").hide(); break; default: break;} }); }); $(function() { $(".hoofd").change(function() { var rex = $('.hoofd').val(); console.log(rex); switch (rex) { case "all": $("figure").show(); break; case "dans": $("figure").hide(); $("#4-5_dans").show(); break; case "science": $("figure").hide(); $("#6-8_science").show(); break; case "beeldkunst": $("figure").hide(); $("#4-5_beeldkunst").show(); break; default: break; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- the gallery --> <div id="background"> <div id="gallery"> <figure id="4-5_dans" class="pic1 "> <img src="https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=60" height="40px" /> <figcaption>Dans</figcaption> </figure> <figure id="4-5_beeldkunst" class="pic2 "> <img src="https://images.unsplash.com/photo-1634076904466-66cf4faeaf03?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=60" height="40px" height="40px" /> <figcaption>Beeldkunst</figcaption> </figure> <figure id="6-8_science" class="pic3 "> <img src="https://images.unsplash.com/photo-1633993364598-50b082282d88?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=60" height="40px" /> <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> <!-- Hi bro i hope this help you ,in your code issue you use id and id is unique you can not put space in id --> <!-- the jquery -->