我有這個 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 結束
我怎樣才能建立這個邏輯？
uj5u.com熱心網友回復：
不要回圈執行。給所有按鈕一個公共類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();
}
這會將處理程式一次添加到所有按鈕。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/470289.html
標籤：javascript php jQuery 循环