Создать множественный фильтр выбора в JavaScript - PullRequest
Новая
       28

Создать множественный фильтр выбора в JavaScript

0 голосов
/ 21 сентября 2018

У меня есть эти панели, у которых есть опции для фильтрации по классам 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();
});

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Открыть мой код в codePen:

CodePen

Пояснениями являются комментарии вместе с кодировкой.

Head: 

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

    }

});
0 голосов
/ 21 сентября 2018

Используйте этот 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();
});
...