javascript - 在 javascript 中创建多个过滤选择器

Question

我得到了这些面板，其中有按红色、绿色和黄色类别过滤的选项，以及另一个“显示全部”选项。他们表现良好，但我想要实现的目标如下:当单击“显示全部”时，然后在例如“黄色”上 ->它应该隐藏除黄色之外的所有内容。另外，您应该只能选择黄色+绿色、红色+黄色等，这样只有这些按钮保持选中状态。当用户单击所有三个按钮时，它可以自动选择“显示全部”...

我对如何设置它的逻辑有点困惑，所以欢迎任何帮助，非常感谢!

这是一支带有示例的笔:https://codepen.io/anon/pen/YOgqRX

$('.main__container').masonry({
    itemSelector: '.item',
    columnWidth: '.item'
});

$("#filter-show-all").on('click', function() {
    $(".item").each(function(item) {
        $(this).removeClass("panel-hide");
        $('.main__container').masonry();
    });
});

$("#filter-red").on('click', function() {
    $(".red").toggleClass("panel-hide");
    $('.main__container').masonry();
});

$("#filter-green").on('click', function() {
    $(".green").toggleClass("panel-hide");
    $('.main__container').masonry();
});

$("#filter-yellow").on('click', function() {
    $(".yellow").toggleClass("panel-hide");
    $('.main__container').masonry();
});

Answer 1

在 codePen 中打开我的代码:

CodePen

解释是与编码一起的注释。

头部:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

CSS:

<style>
.main__container {
    width: 100%;
}
.item {
    width: 100%;
    box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    padding: 10px;
}

@media(min-width: 800px) {
    .item {
        width: 49%;
    }
}

.red {
  background: red;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}
/*added css*/
.on{
    border: 3px solid blue;
}
.off{
    border: none;
}
</style>

HTML:

<div class="container">
  <div class="row">
        <div class="col-md-12">
            <div class="filters">
                <button id="filter-show-all" class="on">Show all</button>
                <button id="filter-red" class="on">Show red</button>
                <button id="filter-green" class="on">Show green</button>
                <button id="filter-yellow" class="on">Show yellow</button>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="main__container">
                <div class="item red">
                    <h4>Red</h4>
                </div>
                <div class="item green">
                    <h4>Green</h4>
                </div>
                <div class="item red">
                    <h4>Red</h4>
                </div>
                <div class="item yellow">
                    <h4>Yellow</h4>
                </div>
                <div class="item yellow">
                    <h4>Yellow</h4>
                </div>
                <div class="item green">
                    <h4>Green</h4>
                </div>
            </div>
        </div>
    </div>
</div>

JQuery:

$('.main__container').masonry({
    itemSelector: '.item',
    columnWidth: '.item'
});
/*
    Check if clicked button state is 'on' or 'off'
    if it is 'on', After click, let matched color block disappear,
    if it is 'off', After click, let matched color block show
*/ 

/* turn showAll button off, hide all the items */
function showAllOff_hideItems(){
    if($('#filter-show-all').attr('class')=='on'){
        $('#filter-show-all').click();          
    }       
}

$("#filter-show-all").on('click', function() {          
    if($(this).attr('class')=="on"){
        $(".item").each(function(item) {            
            $(this).hide();
        });
    }else{
        $(".item").each(function(item) {            
            $(this).show();     

        });

    }
    $('.main__container').masonry();
});

$("#filter-red").on('click', function() {
    showAllOff_hideItems();
    if($(this).attr('class')=="on"){
         $(".red").hide();
    }else{
        $('.red').show();
    }

    $('.main__container').masonry();
});

$("#filter-green").on('click', function() {
    showAllOff_hideItems();
    if($(this).attr('class')=="on"){
         $(".green").hide();
    }else{
        $('.green').show();
    }

    $('.main__container').masonry();
});

$("#filter-yellow").on('click', function() {
    showAllOff_hideItems();
    if($(this).attr('class')=="on"){
         $(".yellow").hide();
    }else{
        $('.yellow').show();
    }

    $('.main__container').masonry();
});
/* Esstential Coding here : */

$('.filters button').on('click',function(){

    if($(this).attr('id')!="filter-show-all"){
        /*Toggle the clicked button*/
        if($(this).attr('class')=="on"){
            $(this).attr('class','off');
        }else{
            $(this).attr('class','on');
        }

    }else{
        /* if show all button is clicked */
        /* if it is on, turn all the buttons off */     
        if($(this).attr('class')=="on"){
            $('.filters button').each(function(){
                $(this).attr('class','off');
            });
        /* if it is off, turn all the buttons on */ 
        }else{
            $('.filters button').each(function(){
                $(this).attr('class','on');
            });
        }           

    }

});