Question

我正在使用Isotope作为花哨布局中链接内容的分类组织者。我正在尝试将多个值推入数组，以便显示过滤器触及的所有项目。然而，最终结果只是显示数组中的最新项而不是总和。最初，我将所有值都推送到字符串中，然后将x声明为最终结果 - 我意识到这不是解决这个问题的方法，并且已经修改过它。我正在推入一个数组，而不是一个字符串，希望加入每个值，以便它们全部显示出来。但是，我仍然只获得最新的选定值。 JS就在下面。

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

  $('.filters').on('click', '.button', function() {
    var filters = [];
    // var filters = '';
    var selected = $(this).data('selected');
    var group = $(this).data('group');
    var currentFilter = $(this).data('filter');

    // toggle function along with having multiple selectors
    if(selected == "0") {
      filters.push($(this).data('filter'));
      filters = filters.join(', ');
      // filters = $(this).data('filter');
      $(this).data('selected', "1");
      $(this).addClass('is-checked')
    }
    else {
      $(this).data('selected', "0");
      $(this).removeClass('is-checked')
    }

    // set filter for Isotope
    $grid.isotope({
      filter: filters
    });

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

我还为摆弄设置了codepen。感谢您提出的任何建议。甚至指向我可能错过的文档或教程将是一个很大的帮助。现在，我正在研究这个我正在拍摄的jsfiddle，看看如何修改我的代码以更好地适应这里发生的事情。

Answer 1

上周我也花了很多时间。 :)幸运的是我发现了Desandro的编码器http://codepen.io/desandro/pen/owAyG/ 希望有所帮助。

$( function() {

  // filter functions
  var filterFns = {
    greaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    even: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) % 2 === 0;
    }
  };

  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.color-shape',
    filter: function() {
      var isMatched = true;
      var $this = $(this);

      for ( var prop in filters ) {
        var filter = filters[ prop ];
        // use function if it matches
        filter = filterFns[ filter ] || filter;
        // test each filter
        if ( filter ) {
          isMatched = isMatched && $(this).is( filter );
        }
        // break if not matched
        if ( !isMatched ) {
          break;
        }
      }
      return isMatched;
    }
  });

  // 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');
    // arrange, and use filter fn
    $container.isotope('arrange');
  });

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

});

Answer 2

这是我最终解决的问题。

我提出了一个单独的解决方案，但这是一支很棒的笔。我希望我以前见过它。

$(document).ready(function() {   
// init Isotope   
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  fitRows: {
    gutter: 27
  }   
});

// store filter for each group   
var filters = [];

$('.filters').on('click', '.button', function() {

  var filterstring = '';
  var selected = $(this).data('selected');
  var currentFilter = $(this).data('filter');


  // toggle function along with having multiple selectors
  if (selected == "0") {
    filters.push( currentFilter );
    $(this).data('selected', "1");
    $(this).addClass('is-checked')
  } else {
    $(this).data('selected', "0")
    $(this).removeClass('is-checked')

    var filtername = $(this).data('filter')
    var i = filters.indexOf(filtername)
    filters.splice(i, 1)
  }
  filterstring = filters.join(', ');
    // set filter for Isotope
    $grid.isotope({
      filter: filters.join("")
     });   
   }); 
 });

试图将多个值推入数组（Isotope）

2 个答案: