Question

我正在使用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");

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

我对此很满意，希望得到一些帮助。

感谢。

Answer 1

我弄明白发生了什么。该行未从选择框中选择适当的属性。

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

我不得不改变它：

filters[ group ] = $("option:selected",this).attr('data-filter-value');

数组已设置但未定义

1 个答案: