Question

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

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/

非常感谢任何帮助。提前致谢

Answer 1

isoSelective一次使用.live()方法，在jQuery 1.9中完全删除了。

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

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

同位素切换组合滤波器

1 个答案: