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

Question

我得到了这些面板，其中包含按红色、绿色和黄色类过滤的选项，以及另一个“显示全部”选项。他们表现得很好，但我想要实现的是：当点击显示全部时，然后点击例如黄色 - >它应该隐藏除黄色之外的所有内容。此外，您应该只能选择 Yellow + Green、Red + Yellow 等，以便只有这些按钮保持选中状态。当用户点击所有三个按钮时，它会自动选择“显示全部”...

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

这是一支笔示例：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

解释是cmets连同编码。

头：

<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');
            });
        }           

    }

});

Answer 2

使用这个 jquery，如果它不起作用，请告诉我

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

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

});

$("#filter-red").on('click', function() {
    $(this).toggleClass("selected");
    if($(this).hasClass("selected"))
    {
        $(".red").removeClass("panel-hide");
    }
    else
    {
        $(".red").addClass("panel-hide");
    }
    if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
      {
        $($('#filter-show-all').addClass("selected"))
      }
  else
    {
      $($('#filter-show-all').removeClass("selected"))
    }
    $('.main__container').masonry();
});

$("#filter-green").on('click', function() {
    $(this).toggleClass("selected");
    if($(this).hasClass("selected"))
    {
        $(".green").removeClass("panel-hide");
    }
    else
    {
        $(".green").addClass("panel-hide");
    }
    if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
      {
        $($('#filter-show-all').addClass("selected"))
      }
  else
    {
      $($('#filter-show-all').removeClass("selected"))
    }
    $('.main__container').masonry();
});

$("#filter-yellow").on('click', function() {
    $(this).toggleClass("selected");
    if($(this).hasClass("selected"))
    {
        $(".yellow").removeClass("panel-hide");
    }
    else
    {
        $(".yellow").addClass("panel-hide");
    }
    if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
      {
        $($('#filter-show-all').addClass("selected"))
      }
  else
    {
      $($('#filter-show-all').removeClass("selected"))
    }
    $('.main__container').masonry();
});