Question

我得到了这些面板，这些面板具有按Red，Green和Yellow类进行过滤的选项，以及另一个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中创建多个过滤器选择器

2 个答案: