13

我有一个同位素组合过滤器设置，其中包含许多数据过滤器组，每个过滤器组都有一个休息/显示所有列表项：

<li><a href="#" data-filter="*">Show all</a></li>

是一种重置所有数据过滤器组的方法 - 一个“全部重置”链接吗？

我当前的 javascript 是：

        var $container = $('.content ul.sort'),
            filters = {};

        $container.isotope({
          itemSelector : '.dynamic-filter'
        });

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

          var $optionSet = $this.parents('.option-set');
          // 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-value');
          // convert object into array
          var isoFilters = [];
          for ( var prop in filters ) {
            isoFilters.push( filters[ prop ] )
          }
          var selector = isoFilters.join('');
          $container.isotope({ filter: selector });

          return false;
        });

有任何想法吗？

<-- 编辑-->

似乎找到了我自己问题的答案：

        $(".isotope-reset").click(function(){
        $(".content ul.sort").isotope({
            filter: '*'
        });
    });
4

2 回答 2

20

由于发帖人没有将他的答案放在答案中，所以这里是为那些遇到这个问题但看不到答案的人准备的

以下代码重置同位素过滤器：

$(".isotope-reset").click(function(){
    $(".content ul.sort").isotope({
        filter: '*'
    });
});
于 2013-12-03T14:22:17.810 回答
3

我正在寻找类似的东西，我想我会把答案放在这里，以防其他搜索者遇到这个问题。我对海报提到的解决方案的问题是，至少对我来说，它没有进行真正的重置。我希望按钮和过滤器一样重置。此外，我遇到了一个奇怪的错误，在按下重置按钮后，我的过滤器无法正常工作。

下面的脚本解决了我所有的问题（在这个答案的日期，大声笑）。来源：https ://github.com/metafizzy/isotope/issues/928

  var $anyButtons = $('.filters').find('button[data-filter=""]');
  var $buttons = $('.filters button');

  $('.button--reset').on( 'click', function() {
    // reset filters
    filters = {};
    $grid.isotope({ filter: '*' });
    // reset buttons
    $buttons.removeClass('is-checked');
    $anyButtons.addClass('is-checked');
  });
于 2015-10-13T00:29:15.123 回答