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)
        });
   });
});

一个正在使用真实的.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

在这种情况下，与其使用await NavigationService.NavigateAsync($"{nameof(MyNavigationPage)}/{nameof(MyFirstPage)}");和.hide()，不如将CSS类添加到元素中以隐藏它们通常会更好。

我将创建诸如.show()和.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

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

结合javascript函数一起工作

1 个答案: