结合javascript函数一起工作

Posted 2023-01-30

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

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

我在这个网站上找到了类似问题的解决方案，但没有任何与我的特定情况有关的问题。

这是下拉列表的过滤器：

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

一个是使用真正的.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-category-filter。

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

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