将循环中的$var位置与PHP合并

Question

我有一个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，filter-2等等)目前是手动设置的，我不知道如何构建逻辑，在

• 第一次迭代？设置‘display:hide -1’，将display:hide设置为所有过滤器，而'filter-1‘和display:block只设置为display:block迭代？设置‘display:hide -2’，将display:hide设置为所有过滤器，而'filter-2‘和display:block仅设置为display:block，直到foreach结束

为止。

我怎样才能建立这个逻辑呢？

Answer 1

不要在循环中这样做。为所有按钮提供一个公共类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();
}

这会同时将处理程序添加到所有按钮中。