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

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

编辑：我确实看到了这种可能的重复 ，但不喜欢任何答案，因此，为什么我又要问类似的问题。

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

这样，事件将通过class 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的.get（）将jQuery集合转换为javascript数组。

您可以在代码中使用以下功能：

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

不过，最终，我更喜欢@howard建议的方法，其中每对过滤器输入和.filter-clear是独立的，并且在页面顶部的过滤器输入中键入内容不会导致。 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");
    }
});