我正在尝试使用 list.js 插件根据一组复选框过滤一些结果。
我现在设法按一个标准排序,一次只按一个项目排序,即简单,适中,但是当我尝试选择多个复选框时它不起作用,即。同时选择简单和适中。
有没有人对我如何做到这一点有任何建议。 html 和 javascript 如下。
提前致谢。
<div id="search-results">
Sort by:
<button class="sort btn" data-sort="name">
Name <i class="fa fa-fw"></i>
</button>
<button class="sort btn" data-sort="date">
Departures <i class="fa fa-fw"></i>
</button>
<button class="sort btn" data-sort="difficulty">
Difficulty <i class="fa fa-fw"></i>
</button>
Filter:
<label for="easy">Easy</label>
<input type="checkbox" name="easy" class="filter" data-value="Easy" />
<label for="moderate">Moderate</label>
<input type="checkbox" name="moderate" class="filter" data-value="Moderate" />
<label for="challenging">Challenging</label>
<input type="checkbox" name="challenging" class="filter" data-value="Challenging" />
<div class="list">
@foreach (var page in umbracoPages.OrderBy(x => x.Difficulty))
{
<div class="package">
<span class="name">@page.Name</span><br />
<span class="date"><strong>@page.Date @(page.Date == 1 ? "departure" : "departures") available</strong></span><br />
<span class="difficulty">@page.Difficulty</span>
</div>
}
</div>
</div>
Javascript:
$(function () {
$("#dateFrom, #dateTo").datepicker({
dateFormat: "dd.mm.yy",
constrainInput: true,
changeMonth: true,
changeYear: true,
minDate: 0
});
var options = {
valueNames: ['name', 'date', 'difficulty' ]
};
var userList = new List('search-results', options);
//filter
$('.filter').change(function() {
var bool = this.checked;
var value = $(this).data("value");
userList.filter(function (item) {
if (item.values().difficulty == value && bool == true) {
return true;
} else if (userList.filtered && bool == false) {
return true;
} else {
return false;
}
});
return false;
}); });
最佳答案
您需要将事件过滤器存储在一个数组中并检查所有过滤器。
$(function() {
var options = {
valueNames: ['name', 'date', 'difficulty' ]
};
var userList = new List('search-results', options);
var activeFilters = [];
//sort
userList.on("updated", function () {
$('.sort').each(function () {
if ($(this).hasClass("asc")) {
$(this).find(".fa").addClass("fa-sort-asc").removeClass("fa-sort-desc").show();
} else if ($(this).hasClass("desc")) {
$(this).find(".fa").addClass("fa-sort-desc").removeClass("fa-sort-asc").show();
} else {
$(this).find(".fa").hide();
}
})
})
//filter
$('.filter').change(function() {
var isChecked = this.checked;
var value = $(this).data("value");
if(isChecked){
// add to list of active filters
activeFilters.push(value);
}
else
{
// remove from active filters
activeFilters.splice(activeFilters.indexOf(value), 1);
}
userList.filter(function (item) {
if(activeFilters.length > 0)
{
return(activeFilters.indexOf(item.values().difficulty)) > -1;
}
return true;
});
});
});
关于javascript - 使用复选框和 list.js 应用多个过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30077797/