javascript - 结合javascript函数一起工作

Question

我正在构建一个搜索表单，它根据文本输入以及从四个单独的下拉列表(类别、子类别、位置等)中选择选项来过滤结果。

以下两个功能运行良好，但我刚刚意识到，如果我在输入中键入搜索词，进行下拉选择，然后返回并键入不同的搜索词，我的下拉列表将被忽略。

我在这个网站上找到了类似问题的解决方案，但没有一个适合我的具体情况。

这是下拉菜单的过滤器:

$("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");
});

Answer 1

在这种情况下，与其使用 .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");
});

这样，这两个过滤器就不会相互干扰。如果一个元素要通过这两个标准隐藏，它就会同时拥有这两个类，并且仍然保持隐藏状态。如果其中一个过滤器使这样的元素可见，它仍将具有另一个类，并将保持隐藏状态。