无法在 Javascript 的 for 循环中评估数组的所有值答案

【问题标题】：Trouble evaluating all values of an array in a for loop in Javascript无法在 Javascript 的 for 循环中评估数组的所有值
【发布时间】：2013-08-16 15:30:36
【问题描述】：

我正在尝试编写自己的函数来评估输入字段以查看它们是否具有值。所以我写了这个 for 循环：

$("button").click(function(){
    for (var ii = 0; ii < personalInfo.length; ii++) {
      if ($(personalInfo[ii]).val() == 0) {
        $(personalInfoLabels[ii]).addClass("required");
      }
      else{
        $("button").parent("fieldset").slideUp();
      }
    };
});

到目前为止，循环识别空数组的位置并正确标记它们没有问题。

但是，如果任何位置有值，事件就会发生。我怎么能说循环的每个位置是否有一个值，触发事件，但如果没有标记必填字段？

代码的 JSFiddle 可在 http://jsfiddle.net/bjKX7/ 获得

【问题讨论】：

标签： javascript jquery loops for-loop

【解决方案1】：

我重新安排了您的代码，请在此处查看：

$("#cont-one").click(function () {
    var error = 0;
    for (var ii = 0; ii < personalInfo.length; ii++) {
        if ($(personalInfo[ii]).val() == 0) {
            $(personalInfoLabels[ii]).addClass("required");
            error++;
        } else {
            $(personalInfoLabels[ii]).removeClass("required");
        }
    };
    if (error) {
        return false;
    }
    $("#cont-one").parent("fieldset").slideUp();
});

此代码将通过所有输入并将类添加到您想要的那些。如果它们被填满，它还将删除该类。我还添加了return false;，以防出现错误，因此函数和表单提交将在此处停止（以防出现错误）。

请记住，输入字段是自关闭的，因此像我在演示中所做的那样，将 / 关闭代码添加到输入中。

演示here

【讨论】：

@FritsvanCampen 同意。它不会突出显示所有错误，只是第一个错误，我不会这样做
@Ian，也很好，谢谢。已修复，现在它会突出显示所有错误。
@Sergio 是的，现在你不return，它允许验证所有元素:)
我不是想改变你的代码，但我是这样组织它的：jsfiddle.net/SznRc - 它使用 jQuery 的本机方式迭代一个 jQuery 对象，并且在某种程度上简化了循环的代码.我不认为== 0 是检查的好选择，因为如果输入是0，那将是正确的
@Ian 认为这也比 OP 更好。使用 .each 可以简化（这就是为什么 jQuery 很好）。我投票赞成您的评论，如果您将其作为答案发布，我也投票赞成；）

【解决方案2】：

仅当所有字段都不为空时，才在循环外保留一个布尔值 true：

$("button").click(function(){
    var all_good = true;
    for (var ii = 0; ii < personalInfo.length; ii++) {
        if ($(personalInfo[ii]).val() !== "") { // not empty
            $(personalInfoLabels[ii]).addClass("required");
            all_good = false;
        } else {
            $(personalInfoLabels[ii]).removeClass("required"); 
        }
    };
    if (all_good) {
        $("button").parent("fieldset").slideUp();
    }
});

顺便说一句：

$(personalInfo[ii]).val() == 0

因为胁迫而起作用，这有点难以看到。我只想写：

$(personalInfo[ii]).val() === "" // or
$(personalInfo[ii]).val().length === 0

因为这就是你的意思。

输入字段的值是总是字符串，而不是数字，因此您甚至可以使用===，因为您知道类型是string。同样，String.length总是是number。

【讨论】：

SyntaxError: missing ) after argument list。在// not empty 之前添加一个开头的卷曲来修复。
这并不取决于您，但您可能希望在与"" 比较之前将输入值$.trim()。我知道 OP 对此一无所知，但在验证必填字段时这通常是一个很好的建议，因为空格不应该计算
您可能还想保留else { $(personalInfoLabels[ii]).removeClass("required"); }，否则以后的提交不会清除新的有效字段，对吧？ 编辑： 意识到我看到的 else 来自 Sergio 的回答，而不是 OP 的代码。还是个好主意

【解决方案3】：

如果一切顺利，请先验证，最后验证 .slideUp()。 Like this

// validate first
for (var ii = 0; ii < personalInfo.length; ii++) {
    if ($(personalInfo[ii]).val() == 0) $(personalInfoLabels[ii]).addClass("required");
}

// check if there are any marked as required, if not, slideUp
var fs = $("#cont-one").parent("fieldset");
if (fs.find('.required').length == 0) fs.slideUp();

【讨论】：