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>

当页面加载并且我通过fields/textboxes标签时，段落颜色会发生变化。这就是我想要的：blur function。

我不明白的内容：

除非我在最后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")
         }
     });
 });

这里有一个小提琴：JSfiddle Example

感谢您的解释

Answer 1

一旦达到预期的条件，你就不会脱离循环。相反，你循环遍历所有文本框，并最终如果最后一个文本框没有任何值，它将被设置为红色，无论哪个具有值，因为它是迭代中的最后一个。相反，您可以使用.each()

突破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;
         }
     });
 });

就此而言，你可以将其减少到：

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

Answer 2

我更新了您的代码，请查看小提琴

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

当你突破循环时你应该改变段落颜色：

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

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

2 个答案: