我正在尝试使用插件list.js为产品列表创建多个过滤器，即我想按颜色和项目过滤列表，此时下面的代码只是对红色项目进行过滤如何可以我改变它，以便如果用户同时选择颜色和项目，它会正确过滤吗？
<form id="filter">
<select id ="colour" name="colour">
<option value="0">All packages</option>
<option value="1">Red</option>
<option value="2" >Yellow</option>
<option value="3" >Green</option>
</select>
<select id ="items" name="items">
<option value="0">All items</option>
<option value="1" >T-shirt</option>
<option value="2">Trousers</option>
<option value="3" >Jumper</option>
</select>
</form>
$('#filter-clothes').click(function() {
featureList.filter(function(item) {
if (item.values().colour == "Red") {
return true;
} else {
return false;
}
});
return false;
});
答案 0 :(得分：2)
我认为＃filter-clothes是用户单击以应用过滤器的按钮。
$('#filter-clothes').on('click', function() {
var colorFilter = $('#colour').text();
var itemFilter = $('#items').text();
featureList.filter(function(item) {
return
(colorFilter==='All packages' || item.values().colour === colorFilter)
&& (itemFilter==='All items' || item.values().item === itemFilter);
});
return false;
});
如果为颜色或项目下拉列表选择了值，则只需应用过滤器即可将其充实。
编辑：这是一个带有一些console.log（）调用的版本，可以帮助你弄清楚为什么它只在你使用||时有效（或）代替＆amp;＆amp; （又）：
$('#filter-clothes').on('click', function() {
var colorFilter = $('#colour').text();
var itemFilter = $('#items').text();
console.log('colorFilter: ' + colorFilter);
console.log('itemFilter : ' + itemFilter);
console.log('Applying filter now...');
featureList.filter(function(item) {
console.log('Running filter() on item: ('+item+')');
console.log('item.values().colour: ' + item.values().colour);
console.log('item.values().item: ' + item.values().item);
return
(colorFilter==='All packages' || item.values().colour === colorFilter)
&& (itemFilter==='All items' || item.values().item === itemFilter);
});
return false;
});
答案 1 :(得分：1)
如果没有看到html或其他函数，例如values()，您可能希望从select标签中获取临时值
$('#filter-clothes').click(function() {
var color=$('#colour').val(), itemVal=$('#items').val();
/* not sure what you expect "item" to be, is index but used your same code*/
featureList.filter(function(item) {
/* not sure what XXX property is for items*/
return item.values().colour == color && tem.values().XXXXX==itemVal;
});
return false;
});
答案 2 :(得分：0)
这篇文章给了我很多帮助，所以我想我会在这里加上这个，因为其他人试图做我所拥有的。
首先是JS for list.js：
/*
* Filtering
*/
var options = {
valueNames: ['name','phone','status','street','tier','type','zip','zone'],
plugins: [
['fuzzySearch']
]
}
var featureList = new List('directory-list', options)
$('.search-fuzzy').keyup(function(){
featureList.fuzzySearch($(this).val());
});
$('#filter-select').on('click', 'a.filters', function(e){
if(this.id == 'filter-type-any' || this.id == 'filter-status-any' || this.id == 'filter-zone-any'){
$(this).addClass('active').parent().siblings().children().removeClass('active')
} else {
$(this).toggleClass('active')
$(this).parent().parent().find('.any').removeClass('active')
}
var activeFilters = []
$('#filter-select').find('a.active').each(function(i) {
if (this.getAttribute('data-match')){
activeFilters.push(this.getAttribute('data-match'))
}
})
if(activeFilters.length) {
var anyType = (($.inArray('resident', activeFilters) + $.inArray('business', activeFilters) + $.inArray('school', activeFilters)) == -3) ? true : false;
var anyStatus = (($.inArray('current', activeFilters) + $.inArray('expiring', activeFilters) + $.inArray('expired', activeFilters) + $.inArray('never', activeFilters)) == -4) ? true : false;
var anyZone = (($.inArray('zone1', activeFilters) + $.inArray('zone2', activeFilters) + $.inArray('zone3', activeFilters) + $.inArray('zone4', activeFilters) + $.inArray('zone5', activeFilters) + $.inArray('zone6', activeFilters) + $.inArray('zone7', activeFilters) + $.inArray('zone8', activeFilters)) == -8) ? true : false;
featureList.filter(function(item) {
if (
( anyType || ($.inArray(item.values().type.toLowerCase(), activeFilters) > -1) )
&&
( anyStatus || ($.inArray(item.values().status.toLowerCase(), activeFilters) > -1) )
&&
( anyZone || ($.inArray(item.values().zone.toLowerCase(), activeFilters) > -1) ) )
{
return true;
} else {
return false;
}
})
} else {
featureList.filter()
}
})
目录过滤器控件
#directory-filters
.row-fluid
input.search-fuzzy(placeholder='Search')
#filter-select.row-fluid
.span6
h5 Type
ul#filter-type
li
a#filter-type-any.filters.any.active(href='#') All Entries
li
a#filter-type-people.filters(href='#', data-match='resident') People
li
a#filter-type-business.filters(href='#', data-match='business') Business
li
a#filter-type-schools.filters(href='#', data-match='school') Schools
br
h5 Status
ul#filter-status
li
a#filter-status-any.filters.any.active(href='#') Any Status
li
a#filter-status-member.filters(href='#', data-match='current') Members
li
a#filter-status-expiring.filters(href='#', data-match='expiring') Expiring
li
a#filter-status-expired.filters(href='#', data-match='expired') Expired
li
a#filter-status-never.filters(href='#', data-match='never') Never Member
.span6
h5 Zone
ul#filter-zone
li
a#filter-zone-any.filters.any.active(href='#') All Zones
li
a#filter-zone-1.filters(href='#', data-match='zone1') Zone 1
li
a#filter-zone-2.filters(href='#', data-match='zone2') Zone 2
li
a#filter-zone-3.filters(href='#', data-match='zone3') Zone 3
li
a#filter-zone-4.filters(href='#', data-match='zone4') Zone 4
li
a#filter-zone-5.filters(href='#', data-match='zone5') Zone 5
li
a#filter-zone-6.filters(href='#', data-match='zone6') Zone 6
li
a#filter-zone-7.filters(href='#', data-match='zone7') Zone 7
li
a#filter-zone-8.filters(href='#', data-match='zone8') Zone 8
答案 3 :(得分：0)
这样做：
$('#filter-clothes').click(function() {
featureList.filter(function(item) {
var colour = $("#colour").text();
var items = $("#items").text();
if (item.values().colour == colour && item.values().items == items) {
return true;
} else {
return false;
}
});
return false;
});
只需确保颜色和项目在过滤器选项中
var options = { valueNames: [ 'colour', 'listT items ype' ] };
var featureList = new List('viewList', options);