使用 PHP 合并循环中的 $var 位置

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>

但是按钮和过滤器（button-1、filter-2 等）的数量目前是手动设置的，我不知道如何构建逻辑，其中

第一次迭代？设置 'button-1'，将 display:hide 设置为所有过滤器，但 'filter-1' 和 display:block 仅设置为 'filter-1'
第二次迭代？设置 'button-2'，将 display:hide 设置为所有过滤器，但 'filter-2' 和 display:block 仅设置为 'filter-2'
依此类推直到foreach结束

我如何构建这个逻辑？

Answer 1

不要循环执行。给所有按钮一个公共的 class 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();
}

这会一次性将处理程序添加到所有按钮。

使用 PHP 合并循环中的 $var 位置

Merge $var positions in a loop with PHP

javascript

php

jquery

loops