同位素切换组合过滤器答案

【问题标题】：Isotope toggle combination filters同位素切换组合过滤器
【发布时间】：2013-10-25 11:56:21
【问题描述】：

我想让同位素组合过滤器切换，所以在这里举例

http://isotope.metafizzy.co/demos/combination-filters.html

点击“红色”时，我希望能够切换它。因此，单击一次它会显示所有红色，再次单击它会再次显示所有红色。此外，我希望能够保留选定的多个按钮，例如选择“红色”和“蓝色”，这将向我显示红色和蓝色。如果我再次单击其中一个，它将使另一个处于选中状态并隐藏切换的那些。这应该能够与其他过滤器结合使用，并且这些过滤器应该以相同的方式工作，具有切换功能。这甚至可以实现吗？我尝试将上述链接中的同位素多重过滤器插件与来自this fiddle 的 isoSelective 结合起来，但没有运气。

这是我使用的一些代码和我创建的小提琴，但它不起作用

$(function(){

var $container = $('#tiles .inner'),
    filters = {};

 $container.isotope({
    animationOptions: {
        duration: 1000,
        queue: false
    },
    itemSelector : '.tile',
    masonry: {
        columnWidth: 130,
        gutterWidth: 41
    }
});

// filter buttons
$('.filter li').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.filter');
  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter');
  // convert object into array
  var isoFilters = [];
  for ( var prop in filters ) {
    isoFilters.push( filters[ prop ] )
  }
  var selector = isoFilters.join('');
  $container.isotope({ filter: selector });
//$container.isoSelective({
//      filter: '.filter-nav',
//      attrSelector: 'data-filter'
//});
  return false;
});

});

http://jsfiddle.net/AcFAe/

任何帮助将不胜感激。提前致谢

【问题讨论】：

标签： jquery filter toggle

【解决方案1】：

isoSelective 在某一时刻使用了.live() 方法，该方法在 jQuery 1.9 中被完全删除。

~~你需要jquery-migrate~~ jquery-migrate 对我不起作用。

我刚刚更新了 isoSelective 以兼容 jQuery 1.9+： https://github.com/simmerdesign/jquery-isoselective

【讨论】：