Question

在我对jQuery的有限理解中，我不明白这里发生了什么。我有两个div，每个div都有一个“必需”类。第一个div包含一组复选框，而第二个包含单选按钮。如果没有选择任何一组中的对象，则对象是突出显示相应的div背景。

然而，第二组（单选按钮）确实有一个默认预先选择的按钮，因此不应突出显示。

以下是正在发生的事情：这两个集合都被循环了两次。在第1个div（复选框）循环结束时，正确突出显示div。选中单选按钮项目并识别默认选中的按钮，并且不突出显示div。然后，第一个div项再次通过。在此结束时 - 并且在第二个div第二次循环之前，第二个div突出显示。我假设这里的原因，即使它正确地循环复选框，它将它们与radiobuttons的id相关联。我需要做的是阻止第二次循环。

$(document).ready(function () {
    $('#Submit').click(function () {
        $('div.Required', '#JobForm').each(function () {
            var FieldName = this.id;
            var FieldLength = FieldName.length
            var CheckError = true;
            $("input:checkbox").each(function () {
                if (this.checked) {
                    CheckError = false;
                }
            });
            if (CheckError) {
                ErrorList += FieldName + ' requires a selection\n';
                this.style.backgroundColor = "#FFC0C0";
            }
            CheckError = true;
            $("input:radio").each(function () {
                if (this.checked) {
                    CheckError = false;
                }
            });
            if (CheckError) {
                ErrorList += FieldName + ' requires a selection\n';
                this.style.backgroundColor = "#FFC0C0";
            }
        });
        if (Error) {
            $('#Submit').val('Submit');
            alert(ErrorList)
            return false;
        } else {
            document.JobForm.submit();
        }
    });
});

感谢adeneo的建议，我能够限制双div循环，这也让我可以消除额外的错误消息。正如adeneo所说，由于有两个div，正如最初编写的那样，代码每次都循环遍历两种输入类型。如下所示，第一个循环遍历复选框，而第二个循环遍历单选按钮。

$(document).ready(function()
{
    $('#Submit').click(function ()
    {
        $('div.Required','#JobForm').each(function()
        {
            var FieldName = this.id;
            var FieldLength = FieldName.length
            var CheckError = true;
            $("input:checkbox", this).each(function ()
            {
                if(this.checked){CheckError=false;}
            });
            $("input:radio", this).each(function ()
            {
                if(this.checked){CheckError=false;}
            });
            if(CheckError){ErrorList += FieldName+' requires a selection\n'; this.style.backgroundColor="#FFC0C0";}
        });
        if(Error)
        {
            $('#Submit').val('Submit');
            alert(ErrorList)
            return false;
        }
        else
        {
            document.JobForm.submit();
        }
    });
});

Answer 1

你没有对每个DIV进行两次迭代，但你在所有输入上迭代的次数与匹配DIV的次数相同

$('#Submit').click(function () {

    // loop over the DIV's, lets say two times if there are two elements
    $('div.Required', '#JobForm').each(function () { 
        // ..... other code

        // the code below selects all the checkboxes, both times

        $("input:checkbox").each(function () {
            if (this.checked) {
                CheckError = false;
            }
        });

        // the code below selects all the radiobuttons, both times

        $("input:radio").each(function () {
            if (this.checked) {
                CheckError = false;
            }
        });

     // .......more code
    });
});

使用上下文或find()

限制输入的选择

$("input:checkbox", this).each(function () { ...

或

$(this).find("input:checkbox").each(function () { ...

另外，你的条件没有意义，你继续将CheckError设置为布尔值，然后在下一行检查该布尔值，你将永远不会得到不同的结果

CheckError = true;
if (CheckError) { ...

就像在做

if (true) { ...

jQuery嵌套函数循环两次

1 个答案: