jquery 過濾類別多條件

Question

我正在嘗試按不同的變體過濾產品列表。

我有一個尺寸列表，然后是材料按鈕和不同顏色選項。 每種尺寸都有 class 型號的名稱，考慮為有庫存。 因此，在單擊“黃金”按鈕時，您會過濾掉所有未標記為黃金的尺寸。

我想要完成的是用兩個條件過濾。 因此，如果您單擊金色，它會過濾掉沒有 class 金色的所有內容，但是當您單擊顏色選項時，我想在已選擇的金色類別中進行過濾。 我的代碼目前沒有考慮到這一點，例如，如果您單擊藍色，它會以藍色顯示所有可用尺寸，而不僅僅是帶有材料金色的藍色尺寸。

我還認為，如果您單擊一個尺寸，它應該可以過濾可用的 colors 和材料，這應該在任何方向上都有效。

這是我的 html：

<div class="grid grid-cols-4">
    <button id="five" class="size silver gold blue">5</button>
    <button id="six" class="size gold red">6</button>
    <button id="seven" class="size silver red blue">7</button>
    <button id="eight" class="size silver gold red">8</button>
    <button id="nine" class="size gold red">9</button>
    <button id="ten" class="size silver blue">10</button>
    <button id="eleven" class="size gold red">11</button>
    <button id="twelve" class="size silver red">12</button>
</div>
<div>
    <button id="silver">silver</button>
    <button id=gold>gold</button>
</div>      
<div>
    <button id="tsavorite">red</button>
    <button id="emerald">blue</button>
</div>

和 jquery：

$( document ).ready(function() {
    $('#gold').on("click", function() {
          $('.size').hide();
          $('.gold').show();
     });
     $('#silver').on("click", function() {
          $('.size').hide();
          $('.silver').show();
     });

    $('#blue').on("click", function() {
          $('.size').hide();
          $('.blue').show();
     });
     $('#red').on("click", function() {
          $('.size').hide();
          $('.red').show();
     });
});

Answer 1

我為此創建了動態方式。 請檢查以下代碼。

 $( document ).ready(function() { $('.filter-button').on("click", function() { var data_type = $(this).attr('data-type'); var data_value = $(this).attr('data-value'); $("[data-type="+data_type+"]").removeClass('active'); $(this).addClass('active'); $('.size').hide().removeClass('active'); var classesArray = []; $('button.active').each(function(){ var selected_filters = $(this).attr('data-value'); classesArray.push(selected_filters); }) classes = classesArray.join('.'); $('.'+classes).show(); }); $('.size').on("click", function() { $('.size').removeClass('active'); $(this).addClass('active'); $('.filter-button').removeClass('active').hide(); var selected_new_filters = $(this).attr('class'); var filteredAry = selected_new_filters.split(" "); var filteredAry = filteredAry.filter(function(e) { return e;== 'size' }); for(i=0.i<filteredAry;length.i++) { $("[data-value="+filteredAry[i]+"]");show(); } }); });

 .active{background:green} button{margin:10px;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="grid grid-cols-4"> <button id="five" class="size silver gold blue">5</button> <button id="six" class="size gold red">6</button> <button id="seven" class="size silver red blue">7</button> <button id="eight" class="size silver gold red">8</button> <button id="nine" class="size gold red">9</button> <button id="ten" class="size silver blue">10</button> <button id="eleven" class="size gold red">11</button> <button id="twelve" class="size silver red">12</button> </div> <div> <button class="filter-button" data-value="silver" data-type="material">silver</button> <button class="filter-button" data-value="gold" data-type="material">gold</button> </div> <div> <button class="filter-button" data-value="red" data-type="color">red</button> <button class="filter-button" data-value="blue" data-type="color">blue</button> </div>