Question

我在有2组过滤器的页面上使用同位素，这里是fiddle，我试图添加一个额外的功能，如果第二次按下过滤器按钮，当它上面有“选定”类时，列表应重置自己并再次显示所有元素。我尝试使用'reLayout'方法来做到这一点。

像这样：

  if ( $this.hasClass('selected') ) {
      $container.isotope( 'reLayout' );
    return;
  }

但它没有用，我也不知道为什么。

有没有人对如何使这项工作有更好的想法？感谢

Answer 1

经过多次尝试，我成功完成了这项工作。

这是我的解决方案，以防任何人有同样的需求

更新的小提琴http://jsfiddle.net/K8QN6/2/

$('.filter a').click(function () {
    var $this = $(this);
    // don't proceed if already selected

    var $optionSet = $this.parents('.option-set');
    // change selected class
    $this.toggleClass('selected');

    // store filter value in object
    // i.e. filters.color = 'red'
    var group = $optionSet.attr('data-filter-group');
    filters[group] = $this.attr('data-filter-value');

    // convert object into array
    var isoFilters = [];
    for (var prop in filters) {
        isoFilters.push(filters[prop])
    }
    var selector = isoFilters.join('');
    $container.isotope({
        filter: selector
    });

    if (!$this.hasClass('selected')) {
        $this.attr("data-filter-value", $this.data("filter-value"));
    } else {
        $this.data("filter-value", $this.attr("data-filter-value"));            
        $this.attr("data-filter-value", "");
    }

    return false;
});

同位素 - 更改过滤器按钮上的过滤器选项

1 个答案: