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

【问题标题】：Isotope - change filter option on filter button同位素 - 更改过滤器按钮上的过滤器选项
【发布时间】：2014-03-10 23:56:10
【问题描述】：

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

像这样：

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

但它不起作用，我不知道为什么。

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

【问题讨论】：

标签： javascript jquery jquery-isotope

【解决方案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;
});

【讨论】：