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");
但不允許通過兩組進行過濾,只有一個,如果我替換該行
代碼工作。
我對此很滿意,希望得到一些幫助。
謝謝。