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

Check if any input in a jQuery collection has a value

本文关键字：输入 是否 任何 jQuery 集合 检查      更新时间：2023-09-26

我正在构建一个带有搜索输入的表单，该表单在搜索输入中显示和隐藏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");
  }
}

编辑：我确实看到了这个可能的重复，但不喜欢任何答案，因此我再次问类似的问题。

这里有一个助手函数，它将告诉您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输入和.filter-clear都是独立的，在页面顶部的filter输入中键入一些内容不会导致.filter-clear元素显示在页面底部的（空）filter输入上。

好吧，我没有你的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/

这是一个基本的例子，但提供了一个基于我如何阅读你的问题的解决方案。如果你正在努力实现不同的目标，请告诉我。

首先将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");
    }
});
相关文章：