Javascript 为什么不是'；jQuery addClass方法在这里不起作用吗？ 环境 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;
}

我知道它们是有效的，因为当我将字段留空时，会收到

警报（“缺少必填字段”）。但是由于某种原因，
$（o）.addClass（'error'）实际上并没有添加类。我知道这个类是有效的，因为如果我手工添加它，视觉风格看起来就像我想要的。此外，我知道它没有添加类，因为我在收到
警报后在Firebug中签出了元素

我是不是遗漏了什么？我认为这是直截了当的——甚至用jQuery文档检查了一下，我觉得这是对的

以下是标记中一个字段的示例：

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

jQuery选择器在DOM准备就绪之前运行，这意味着没有选择任何元素（因为它们尚未生成）

如果在DOM准备就绪后选择元素，则可以正常工作

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

此外，正如其他人所说，您应该将
.foreach（）
循环转换为常规的
for
循环

有关示例，请参见以下jsbin：

它在以下JSFIDLE示例中工作：

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

Javascript：
var firstName=$（“#firstName”）；
$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（e）{
formIsValid（）；
});
});

//这段代码应该可以解决这个问题

$(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;
}

});

你的代码没有告诉我们什么样的对象是firstName，lastName。。。它们是jquery对象吗？不应该是o.addClass（'error'），因为顶部已经有$（）了吗？@GrayB应该是的，但是额外的
$（）
也不应该有什么区别。也就是说，它一定是其他东西。对我来说很有用，请看。这就是答案！这是一些奇怪的东西，我的朋友@MichaelPerrenoud事实上这并不奇怪，你只是不能选择那些还不存在的元素！昨天没有人想到这一点，包括我自己，这让我感到惊讶@bfavaretto，奇怪的是变量实际上是jQuery对象，实际上是表单上的
输入
元素。如果时间太早（即，它们还不存在），为什么它们不
null
？当jQuery找不到选择器的对象时，它返回一个包含空元素列表的jQuery对象。这样它就不会在
$（'selector'）.hide（）之类的东西上崩溃，如果元素不存在的话。早期的jQuery版本按照您所说的那样工作，返回null或未定义，然后进行更改。
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;
}

$(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;
}

});