如何在多个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 -->