为什么jQuery addClass方法不在这里工作？

Question

环境

• 的Mozilla Firefox 20.0.1
• 的jQuery 1.7.1

我有一组验证功能：

var firstName = $('#FirstName'), 
    lastName = $('#LastName'), 
    dateOfBirth = $('#DateOfBirth'), 
    city = $('#City'), 
    phone = $('#Phone'), 
    email = $('#Email'), 
    insType = $('#InsType'), 
    otherInsType = $('#OtherInsType'), 
    insID = $('#InsID'), 
    service = $('#Service'), 
    otherService = $('#OtherService'), 
    comments = $('#Comments'), 
    outOfPocket = $('#OutOfPocket'), 
    permission = $('#Permission'), 
    signature = $('#Signature'); 

function formIsValid() { 
    if (missingRequiredField([ 
     firstName, lastName, dateOfBirth, city, phone, email, 
     insType, insID, service, comments, outOfPocket, permission, 
     signature 
    ])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function(o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

，我知道他们的工作，因为当我离开字段空白我得到alert('There is a missing required field.');。但由于某些原因，$(o).addClass('error');实际上并未添加该类。我知道这个班的作品，因为如果我手工添加它的视觉风格看起来像我想要的。此外，我知道它没有添加类，因为我在得到alert后检查了Firebug中的元素。

我在这里错过了什么吗？我认为这是直截了当的 - 即使使用jQuery文档进行检查，它看起来是对的。

这里是标记以及中的一个字段的一个例子：

<div> 
    <label for="FirstName">First Name</label> 
    <input type="text" id="FirstName" name="FirstName" /> 
</div> 

编辑

我连拉forEach伸到基本for循环和addClass仍是用不了。该功能正在工作，因为hasError返回true当一个字段没有值 - 只是顽固的addClass。 注：我没有拉断不必要$围绕这个版本的o。

function missingRequiredField(objs) { 
    var hasError = false; 
    for (var i = 0; i < objs.length; i++) { 
     var o = objs[i]; 
     if (!o.val()) { 
      o.addClass('error'); 
      hasError = true; 
     } 
    } 

    return hasError; 
} 

Answer 1

的jQuery选择正在运行之前DOM就绪，这意味着正在选择没有元素（因为他们没有被建立尚未）。

如果选择的元素后的DOM准备好了，它的工作原理。

$(document).ready(function() { 
    firstName = $('#FirstName'); 
    lastName = $('#LastName'); 
}); 

此外，因为其他人都表示，应该将.foreach()循环转换为常规for循环。

见的例子如下jsbin：

http://jsbin.com/uzefeg/3/edit

Answer 2

它的工作原理在下面的jsfiddle例如：http://jsfiddle.net/nHHyQ/

诚然，我只使用一个字段来进行测试。我知道这听起来很明显，但是你是否设计了错误类？仔细检查你的CSS中的拼写和选择器。

Javascript： var firstName = $（'＃FirstName'）; $（document）.ready（function（）{ $（'＃test'）。点击（功能（e）{formIsValid（）; }）; }）;

function formIsValid() { 
    if (missingRequiredField([ 
    firstName])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function (o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

Answer 3

//这个代码就可以解决问题

$(function(){ 
var firstName = $('#FirstName'), 
    lastName = $('#LastName'), 
    dateOfBirth = $('#DateOfBirth'), 
    city = $('#City'), 
    phone = $('#Phone'), 
    email = $('#Email'), 
    insType = $('#InsType'), 
    otherInsType = $('#OtherInsType'), 
    insID = $('#InsID'), 
    service = $('#Service'), 
    otherService = $('#OtherService'), 
    comments = $('#Comments'), 
    outOfPocket = $('#OutOfPocket'), 
    permission = $('#Permission'), 
    signature = $('#Signature'); 

function formIsValid() { 
    if (missingRequiredField([ 
     firstName, lastName, dateOfBirth, city, phone, email, 
     insType, insID, service, comments, outOfPocket, permission, 
     signature 
    ])) { 
     alert('There is a missing required field.'); 
     return false; 
    } 

    alert('The form was valid.'); 

    return false; 
} 

function missingRequiredField(objs) { 
    var hasError = false; 
    objs.forEach(function(o) { 
     if (!$(o).val()) { 
      $(o).addClass('error'); 
      hasError = true; 
     } 
    }); 

    return hasError; 
} 

});