爲什麼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; 
} 

});