У меня есть этот PHP, который помогает мне заполнить скрипт:
<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>
Но номера кнопок и фильтров (кнопка-1, фильтр-2 и т.д.) на данный момент задаются вручную, и я не знаю, как построить логику, где
display:hide
на все фильтры, кроме «фильтра-1», и display:block
только на «фильтр-1».display:hide
на все фильтры, кроме «фильтра-2», и display:block
только на «фильтр-2».Как я могу построить эту логику?
Не делайте это в цикле. Дайте всем кнопкам общий класс button
и добавьте обработчик для всех них. Затем он может получить конкретный номер кнопки из атрибута и использовать его в коде, чтобы определить, какой фильтр отображать.
Таким образом, HTML для кнопок будет примерно таким:
<button class = "button" data-filter = "1">Filter 1</button>
<button class = "button" data-filter = "2">Filter 2</button>
and so on
и HTML для фильтров будет:
<div class = "filter-1 filter">blah</div>
<div class = "filter-2 filter">lorum ipsum</div>
and so on
Тогда ваш код jQuery будет просто
$(".button").click(function() {
let filternum = $(this).data("filter");
$(".filter").hide();
$(`.filter-${filternum}`).show();
}
Это добавляет обработчик сразу ко всем кнопкам.