2013-06-26 128 views
1

新建JQuery的檢查值:JQuery的:如何使用每種方法在所有表單輸入元素

好吧,我很困惑,並已經嘗試了所有的變化,包括我在書和JQuery的API已經閱讀。

我有以下的樣品馬克 - 達

<form id="myForm" name="myForm" action="" method="post"> 
    <label>*Enter Input A: 
     <br /> 
     <input type="text" id="inputA" name="inputA" /> 
    </label> 
    <label>*Enter Input B: 
     <br /> 
     <input type="text" id="inputB" name="inputB" /> 
    </label> 
    <label>*Enter Input C: 
     <br /> 
     <input type="text" id="inputC" name="inputC" /> 
    </label> 
    <label>*Enter Input D: 
     <br /> 
     <input type="text" id="inputD" name="inputD" /> 
    </label> 
</form> 
<p class="myText">Sample Text</p> 

頁面加載時,我通過TAB鍵​​,該款顏色的變化。 這是我想要的:blur function

我不明白:

該段不會改變,除非我鍵入一個值到最後textboxinputD。 爲什麼?如果任何方框中有值,我需要更改段落。 這隻有一個值嗎? ($(element).val() == '')

這裏是JQ:

$('#myForm :input[type="text"]').blur(function() { 
    $('#myForm input[type="text"]').each(function (i, element) { 
     if ($(element).val() == '') { 
      $(".myText").css("color", "#F00") 
     } else { 
      $(".myText").css("color", "#9A9A9A") 
     } 
    }); 
}); 

小提琴是在這裏:JSfiddle Example

感謝您還沒有打破循環的,一旦你滿足所需條件的解釋

+0

正如順便說一句,沒有必要在'。每次的PARAMS(功能(I,元素)'代碼,一個簡單的' .each(function(){'這樣做。同樣,只要在if測試中使用'$(this)'。 [見這個jsFiddle](http://jsfiddle.net/6hQBg/),它結合了PSL的解決方案。 – gibberish

+0

@gibberish實際上'this.value'就足夠了.. – PSL

+0

非常感謝! – Asynchronous

回答

6

。相反,如果循環遍歷所有文本框,並且最終如果最後一個文本框沒有任何值,則無論哪個prev值都具有值,因爲這是迭代中的最後一個值,它將被設置爲紅色。相反,你可以使用return false;

$('#myForm :input[type="text"]').blur(function() { 
    $('#myForm input[type="text"]').each(function() { 
     if (this.value == '') { 
      $(".myText").css("color", "#F00") 
     } else { 
      $(".myText").css("color", "#9A9A9A"); 
       return false; 
     } 
    }); 
}); 

對於這個問題爆發.each()循環,你可以減少它歸結爲:

$('#myForm :input[type="text"]').blur(function() { 
    $('.myText').css('color', function() { //use the css function callback 
     return $('#myForm input[type="text"]').filter(function() { //Use filter to return the textboxes which has value 
      return this.value != '' 
     }).length == 0 ? "#F00" : "#9A9A9A"; // set the color accordingly 

    }); 
}); 

Fiddle

+0

謝謝我的朋友。我一直在爲此苦苦掙扎:我正在閱讀JQuery缺失手冊,並且從未讀過任何有關您剛纔向我展示的關於從循環或其他執行此操作的方法中突破的內容。我想我會變得更好:再次感謝! – Asynchronous

+0

@UnaverageGuy歡迎您.. :) – PSL

0

我更新了你的代碼,請小提琴

http://jsfiddle.net/Wmrh6/11/

你應該改變款色當u跳出循環:

if(changed)$(".myText").css("color", "#9A9A9A");else 
      $(".myText").css("color", "#F00"); 
相關問題