2011-10-07 91 views
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"); 

但不允許通過兩組進行過濾,只有一個,如果我替換該行

代碼工作。

我對此很滿意,希望得到一些幫助。

謝謝。

回答

0

我想通了什麼。該行沒有從選擇框中選擇適當的屬性。

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

我不得不把它改成這樣:

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