1

我有许多 jQuery 同位素过滤器和一个sort。一切都很好,但我想创建一个重置按钮

我尝试了以下方法(stackoverflow:重置所有组合过滤器),但是虽然它似乎确实重置了项目(在第二次点击时),但它并没有重置过滤器按钮。

4

1 回答 1

0

我只能假设您在写作时的意思是“它不会重置过滤器按钮的外观”

[...] 它不会重置过滤器按钮。

如果是这种情况,并且您的过滤器按钮的外观是由 CSS 类控制的,就像在 Isotope 的示例中一样,您只需在用户单击“重置”时从过滤器按钮元素中删除所述 CSS 类“-按钮。

在例如Isotope 的“组合过滤器”演示的源代码中,您会发现以下代码可以处理单击某个过滤器按钮时发生的所有事情:

// 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;
});

与您的问题相关的重要代码(希望如此)可以在以下几行中找到:

$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
  • 第一行从 $optionSet 中的所有元素中删除所有“选定”类(后者只是针对单个过滤器属性的一组按钮)
  • 第二个为用户单击的元素设置“选定”类
于 2012-10-04T00:54:07.240 回答