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>