javascript - JQuery:如何使用 Each 方法检查所有表单输入元素中的值

Question

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>

当页面加载并且我通过 字段/文本框 切换时，段落颜色发生变化。这就是我想要的:模糊函数。

我不明白的地方:

除非我在最后一个 textbox inputD 中键入一个值，否则段落不会改变。为什么？如果任何框中有值，我需要更改段落。这是否只有一个值？ ($(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")
         }
     });
 });

fiddle 在这里:JSfiddle Example

感谢解释

Answer 1

一旦满足所需条件，您就不会跳出循环。相反，您正在遍历所有文本框，最终如果最后一个没有任何值，它将被设置为红色，无论哪个前一个具有值，因为这是迭代中的最后一个。相反，您可以使用 return false;

跳出 .each() 循环

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

就此而言，您可以将其减少为:

 $('#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