1

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

感谢您的解释

4

2 回答 2

6

一旦满足所需条件，您就不会跳出循环。相反，您正在遍历所有文本框，最终如果最后一个文本框没有任何值，它将被设置为红色，无论哪个前一个文本框有值，因为这是迭代中的最后一个。相反，您可以.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

     });
 });

小提琴

于 2013-06-26T18:24:44.333 回答
0

我更新了你的代码，请检查小提琴

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

当你跳出循环时，你应该改变段落颜色：

   if(changed)$(".myText").css("color", "#9A9A9A");else
          $(".myText").css("color", "#F00");
于 2013-06-26T18:30:20.870 回答