Как отменить выбор фильтра с помощью изотопа? - PullRequest
Новая
       11

Как отменить выбор фильтра с помощью изотопа?

0 голосов
/ 18 января 2019

Можно ли как-нибудь вставить код изотопа, который позволяет отменить выбор одного фильтра без отмены выбора других? Вот код JavaScript: 

<script type="text/javascript">
$(document).ready(function() {
 // init Isotope
 var $grid = $('.grid').isotope({
   itemSelector: '.grid-item'
 });

 $('.shuffle-button').on('click', function() {
  $grid.isotope('shuffle');
 });

 $('.unshuffle-button').on('click', function() {
  $grid.isotope({ sortBy: 'original-order' })
 });

 // store filter for each group
 var filters = {};

 $('.filters').on('click', '.button', function() {
   var $this = $(this);
   // get group key
   var $buttonGroup = $this.parents('.button-group');
   var filterGroup = $buttonGroup.attr('data-filter-group');
   // set filter for group
   filters[ filterGroup ] = $this.attr('data-filter');
   // combine filters
   var filterValue = concatValues(filters);
   // set filter for Isotope
   $grid.isotope({ filter: filterValue });
 });

 // change is-checked class on buttons
 $('.button-group').each(function(i, buttonGroup) {
   var $buttonGroup = $(buttonGroup);
   $buttonGroup.on('click', 'button', function() {
     $buttonGroup.find('.is-checked').removeClass('is-checked');
     $(this).addClass('is-checked');
   });
 });

});

// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
  $grid.isotope('layout');
});

// flatten object by concatting values
function concatValues(obj) {
 var value = '';
 for (var prop in obj) {
   value += obj[ prop ];
 }
 return value;
}

</script>

Вот пример HTML: 

<div class="button-group" data-filter-group="age">
<h1>AGE</h1>
    <button class="button is-checked" data-filter="">all</button>
    <button class="button" data-filter=".10s">teens</button>
    <button class="button" data-filter=".20s">20s</button>
</div>

<div class="button-group" data-filter-group="gender">
<h1>GENDER</h1>
    <button class="button is-checked" data-filter="">all</button>
    <button class="button" data-filter=".male">male</button>
    <button class="button" data-filter=".female">female</button>
</div>

<div class="button-group" data-filter-group="race">
<h1>ETHNICITY</h1>
    <button class="button is-checked" data-filter="">all</button>
    <button class="button" data-filter=".poc">poc</button>
    <button class="button" data-filter=".white">white</button>
</div>

Скажем, у меня выбрано 20 лет, мужчина и покер, но я решил, что хочу отменить выбор мужчины и вместо этого выбрать женщину. По какой-то причине, это не позволит мне сделать это. Есть идеи?

...