我正在构建一个搜索表单,它根据文本输入以及从四个单独的下拉列表(类别、子类别、位置等)中选择选项来过滤结果。
以下两个功能运行良好,但我刚刚意识到,如果我在输入中键入搜索词,进行下拉选择,然后返回并键入不同的搜索词,我的下拉列表将被忽略。
我在这个网站上找到了类似问题的解决方案,但没有一个适合我的具体情况。
这是下拉菜单的过滤器:
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").hide();
$("div#flatdiv").find("article." + filters).show();
});
这是基于搜索输入的过滤器:
$(document).ready(function(){
$("#title").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#flatdiv article").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
一个是使用 true .filter()
,另一个是使用 .find
到 show()
和 hide()
。
我不确定从这里到哪里去。我做了各种尝试,但每次都没有成功,所以我希望有人能帮助我。
更新: 这是最终完美运行的决赛!
//apply selection form any drop down forms
$("select.filterby").change(function(){
var filters = $.map($("select.filterby").toArray(), function(e){
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").addClass("hidden-by-category-filter");
$("div#flatdiv").find("article." + filters).removeClass("hidden-by-category-filter");
});
//apply text input from search form
$("#title").blur(function(){
var textFilters = $(this).val().toLowerCase();
$("article:contains(" + textFilters +")").removeClass("hidden-by-text-filter");
$("article:not(:contains(" + textFilters +"))").addClass("hidden-by-text-filter");
});
最佳答案
在这种情况下,与其使用 .hide()
和 .show()
,不如向元素添加 CSS 类来隐藏它们通常更好。
我会创建诸如 .hidden-by-text-filter
和 .hidden-by-category-filter
之类的类,每个类都会单独隐藏元素:
.hidden-by-text-filter, .hidden-by-category-filter {
display: none;
}
然后在事件处理程序中添加或删除特定类。例如,文本输入的事件处理程序将添加/删除类 .hidden-by-text-filter
,而类别下拉列表将添加/删除类 .hidden-by -类别过滤器
。
$("select.filterby").change(function() {
var filters = $.map($("select.filterby").toArray(), function(e) {
return $(e).val();
}).join(".");
$("div#flatdiv").find("article").addClass(".hidden-by-text-filter");
$("div#flatdiv").find("article." + filters).removeClass(".hidden-by-text-filter");
});
这样,这两个过滤器就不会相互干扰。如果一个元素要通过这两个标准隐藏,它就会同时拥有这两个类,并且仍然保持隐藏状态。如果其中一个过滤器使这样的元素可见,它仍将具有另一个类,并将保持隐藏状态。
关于javascript - 结合javascript函数一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55037268/