代码之家 › 专栏 › 技术社区 › Smithy

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

masonry filter html jquery javascript

Smithy · 技术社区 · 6 年前

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

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

2 回复 | 直到 6 年前

Janice Zhong 6 年前

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>

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

    }

});

Shailendra Gupta 6 年前

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