Tengo este PHP que me está ayudando a completar un script:
<script> (function($){ <?php foreach($buttons as $button) { // loop throught all available buttons ?> // by clicking button one $('.button-1').click( function () { // display:none to all filters but filter-1 $('.filter-2, .filter-3, .filter-4, .filter-5, .filter-6').css({display: "none"}); // guarantee filter-1 will be visible with display: block; $('.filter-1').css({display: "block"}); }); <?php } ?> })(jQuery); </script>Pero la cantidad de botones y filtros (botón-1, filtro-2, etc.) actualmente se configuran manualmente, y no sé cómo construir la lógica, dónde
display:hide a todos los filtros excepto 'filtro-1' y display:block solo a 'filtro-1'display:hide a todos los filtros excepto 'filtro-2' y display:block solo a 'filtro-2'¿Cómo puedo construir esta lógica?
No lo hagas en bucle. Asigne a todos los botones un button de clase común y agregue un controlador a todos ellos. Esto puede obtener el número de botón específico de un atributo y usarlo en el código para determinar qué filtro mostrar.
Entonces, el HTML para los botones será algo como esto:
<button class="button" data-filter="1">Filter 1</button> <button class="button" data-filter="2">Filter 2</button> and so ony el HTML para los filtros será:
<div class="filter-1 filter">blah</div> <div class="filter-2 filter">lorum ipsum</div> and so onEntonces su código jQuery simplemente será
$(".button").click(function() { let filternum = $(this).data("filter"); $(".filter").hide(); $(`.filter-${filternum}`).show(); }Esto agrega el controlador a todos los botones a la vez.