0

我正在使用 jQuery Isotope 过滤产品照片。我不得不更改示例以使用选择框，效果很好，但现在我需要调整示例中的代码，该示例具有多个过滤属性。

这是有效的示例代码：

   $(function(){

    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.color-shape',
      masonry: {
        columnWidth: 80
      }
    });

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

这是我的代码不起作用。

$(function() {

    var $container = $('#productsContainer'),
        filters = {};
    $container.isotope({
        itemSelector: '.item'
    });
    $('.filter select').change(function() {
        var $this = $(this),
            $optionSet = $this.parents('.option-set'),
            $container = $('#productsContainer');
        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;
    });
});

我已将其追踪到要添加的 isoFilters 数组项，但它们是空的。我无法弄清楚问题是什么。

如果我替换此行，则代码有效：

    var selector = isoFilters.join('');

有了这个：

        var selector = $("option:selected",this).attr("data-filter-value");

但这不允许过滤两组，只有一个。

我对此有点头绪，希望能得到一些帮助。

谢谢。

4

1 回答 1

0

我弄清楚发生了什么事。此行没有从选择框中选择正确的属性。

filters[group] = $this.attr('data-filter-value');

我不得不将其更改为：

filters[ group ] = $("option:selected",this).attr('data-filter-value');
于 2011-10-11T19:49:34.340 回答