Question

我正在构建一个带有搜索输入的表单，该表单在搜索输入中显示和隐藏x以清除该输入的内容，但不清除表单中的其他内容。我根据搜索输入是否为空来编写了一个显示和隐藏x的函数。目前，我的页面根据页面宽度呈现表单两次（我知道这不是最好的，但它是我目前所拥有的并且我想不管它）。为此，我需要检查页面上搜索输入的任一实例是否有内容。

以下代码有效，但我担心它很脆弱。如果在页面中添加或删除表单，我希望此代码继续有效。有关如何清理下面一行的任何建议吗？

function toggleFilterInput() {
  // The line I'd like to clean up
  if ( !$(".filter-input").first().val() && !$(".filter-input").last().val() ) {
    $(".filter-clear").addClass("hidden");
  } else {
    $(".filter-clear").removeClass("hidden");
  }
}

编辑：我确实看到this possible duplicate，但不喜欢任何答案，因此我再次提出类似的问题。

Answer 1

好吧，我没有HTML结构，但是我猜测filter-clear类的元素位于DOM中input元素之前/之后。

如果是这种情况，我会这样做：

$(".filter-input").keyup(function () {
    if ($(this).val().length) {
        $(this).siblings(".filter-clear").removeClass("hidden");
    } else {
        $(this).siblings(".filter-clear").addClass("hidden");
    }
});

这样，该事件将应用于具有类filter-input的所有元素，因此可以轻松清除它们。

或者，我可能会动态添加/删除filter-clear元素，而不是已经存在于DOM中，只是隐藏或显示它。这将使您的DOM更清洁。

要记住的另一件事是：有些浏览器本身实现了这个功能，这样的事情可能会与该功能发生冲突。

编辑：我为您准备了这个快速示例https://jsfiddle.net/w704zwax/

这是一个基本示例，但提供了一个基于我如何阅读您的问题的解决方案。如果你想要达到不同的目的，请告诉我。

Answer 2

这是一个帮助函数，可以告诉您jQuery集合中的所有输入是否为空白：

function allAreBlank(inputs) {
    return inputs.get().every(function(input){
        return $(input).val() == "";
    });
}

它使用Array.prototype.every()，它来自浏览器的javascript引擎，而不是来自jQuery。使用它让我们不关心页面上有多少输入。（需要注意的一点是：Array.prototype中提供的许多这些方便的功能在旧版浏览器中不可用，这可能是也可能不是您关注的问题.MDN的文档通常会有一个您可以使用的polyfill您需要支持本机没有该功能的浏览器。）

我们必须在javascript数组而不是jQuery集合上调用.every()，因此我们使用jQuery's .get()将jQuery集合转换为javascript数组。

您可以在代码中使用此功能，如下所示：

function toggleFilterInput() {
    if ( allAreBlank($(".filter-input")) ) {
        $(".filter-clear").addClass("hidden");
    } else {
        $(".filter-clear").removeClass("hidden");
    }
}

但最终，我更喜欢@howard建议的方法，其中每对过滤器输入和.filter-clear都是自包含的，并且在页面顶部的过滤器输入中输入内容并不是＆＃39 ; t导致.filter-clear元素显示在页面底部的（空）过滤器输入上。

Answer 3

首先在某处缓存dom。将选择器存储到像Ibu中提到的变量中。

其次，如果你想检查输入是否有文字，你可以随时

$(selector) or in this case <varname>.keyup(function(){
   var text = $(this).val().length;

    if( text == 0 ){
       $(".filter-clear").addClass("hidden");
    }else{
       $(".filter-clear").removeClass("hidden");
    }
});

检查jQuery集合中的任何输入是否有值

3 个答案: