Question

我有什么办法可以在同位素中插入代码，从而使我可以取消选择一个过滤器而无需取消选择其他过滤器？这是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岁，男性和poc，但是我决定取消选择男性，而是选择女性。由于某种原因，它不会让我那样做。有什么想法吗？

如何使用同位素取消选择过滤器？

0 个答案: