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

Question

我得到了这些面板，其中包含按红色、绿色和黄色过滤的选项 class，以及另一个“全部显示”选项。它们表现正常，但我想要实现的是：当单击“全部显示”时，然后再单击“黄色”-> 它应该隐藏除黄色以外的所有内容。此外，您应该只能 select 黄色 + 绿色、红色 + 黄色等，这样只有那些按钮会保持 selected。当用户点击所有三个按钮时，它可以自动 select "Show All"...

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

这里有一个例子：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

使用这个 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();
});

Answer 2

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

    }

});

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

Create multiple filter selector in javascript

html

javascript

jquery

filter

masonry