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

-1

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

下面的代码有效，但我担心它很脆弱。如果一个表单被添加或从页面中删除，我想这个代码继续工作。有关如何清理下面这一行的建议？

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，但不喜欢任何的答案，因此为什么我再次问过类似的问题。

来源

2015-11-13 styger

首先，您不需要每次运行查询选择。将返回的值保存在变量中。例如：'var input = $（“。filter-input”）;'也检查你的字符串的长度，这应该更准确。 – Ibu

如果你们会打消这个问题，至少要留下一个关于你为什么下调的建设性评论。 – styger

首先缓存某处的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"); 
    } 
});

来源

2015-11-13 19:13:49

是的，我知道如何检查输入值。问题是找到一个更清晰的方法来检查输入集合中的任何输入是否具有值。 – styger

所以当你输入任何输入字段时，你想检查输入是否有值？如果它确实显示'X'？ –

“目前，我的页面呈现两次”...“下面的代码有效，但我担心它很脆弱。如果在页面中添加或删除表单，我希望此代码继续工作。 “... if（！$（”。filter-input“）。first（）。val（）&&！$（”。filter-input“）。last（））.val（））' 我想知道两个搜索输入之一是否有值。我只想提出一些建议，让布尔检查更健壮，更有前途。 – styger

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

这是一个基本的例子，但提供了一个基于如何我读你的问题的解决方案。请让我知道你是否试图取得不同的成就。

来源

2015-11-13 19:25:49

感谢有关浏览器的负责人，这些浏览器有时在本机上实现。但是，我真的只是想要清除这样的输入，所以不是我真正想要的。 – styger

@styger - 根据你对另一个答案的评论，“问题是要找到一种更简洁的方式来检查**集合中任何输入的输入是否有值”，这正是我的代码的功能，但是，你告诉我你只在一个输入上执行这个检查。这是什么？ –

有一个过滤条输入跨两种形式复制，因此它是多次呈现的一种输入类型。所以，我正在寻找的是如何清除过滤条输入，如果该输入的任何一个实例被填充，而不是如何清除页面上的每个输入。 – styger

这里是一个辅助函数，将告诉你，如果在一个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清晰的是自我并且在页面顶部的过滤器输入中键入内容不会导致.filter-clear元素显示在页面底部的（空）过滤器输入上。

来源

2015-11-19 18:10:57 hynkle

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

回答

相关问题