¿Cómo puedes hacer 2 menús desplegables que puedan filtrar una galería? Todos los divs con imagen tienen múltiples identificaciones para ambos menús desplegables, pero el filtro ya no funciona después de agregar un nombre a la identificación. El segundo menú desplegable no filtró, sino que todo desapareció cuando se seleccionó una opción.
¡Gracias!
El código:
<!-- 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>Solo puede tener una ID por elemento, pero de hecho puede tener más de una clase. Pero no tenga múltiples atributos de clase; poner múltiples valores de clase en un atributo
Aquí está la demostración de trabajo, espero que lo ayude a lograr lo que desea.
<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> $(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 -->