Javascript 当输入为n'；你没有空吗？

当我关注输入或输入不为空时，我希望输入的相关图标的颜色发生变化。但当输入不为空时，我的代码无法正常工作

                    <div class="form-group">
                        <label class="label-login" for="emailInput">Email</label>
                        <input type="email" class="form-control" autocomplete="off" id="emailInput" />
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="form-group">
                        <label class="label-login" for="passInput">Password</label>
                        <input type="password" class="form-control" autocomplete="off" id="passInput" />
                        <i class="fa fa-lock"></i>

                    </div>

   $(document).ready(function () {
     $(".myPanel .form-control").each(function () {
    var valueInput = $(this);
    valueInput.focus(function () {
        valueInput.next().addClass("colorOrange");    
    });

    valueInput.blur(function () {
        valueInput.next().removeClass("colorOrange");
    });
    valueInput.on('input', function () {
        if (valueInput.val().length > 0) {
            valueInput.prev().addClass("lableFocus");
            valueInput.next().addClass("colorOrange");
        } else {
            valueInput.prev().removeClass("lableFocus");
            valueInput.next().removeClass("colorOrange");
        }
    });
   });
});
  .colorOrange{
       color:#FFAE00;
  }

电子邮件
密码
$（文档）.ready（函数（）{
$（“.myPanel.form控件”）。每个（函数（）{
var valueInput=$（此）；
valueInput.focus（函数（）{
valueInput.next（）.addClass（“colorOrange”）；
});
valueInput.blur（函数（）{
valueInput.next（）.removeClass（“colorOrange”）；
});
valueInput.on（'input'，function（）{
如果（valueInput.val（）.length>0）{
valueInput.prev（）.addClass（“lableFocus”）；
valueInput.next（）.addClass（“colorOrange”）；
}否则{
valueInput.prev（）.removeClass（“lableFocus”）；
valueInput.next（）.removeClass（“colorOrange”）；
}
});
});
});
.橙色{
颜色：#FFAE00；
}

您的问题在于范围

valueInput

存在于

.ready（）

函数中，但不在

.blur（）

和

.on（）

函数中继承。在这些应用程序中，使用this，它是对触发事件的元素的引用。

您可以使用伪类在纯CSS中执行此操作。这允许您按照

/* html */

    <div class="form-group">
       <label class="label-login" required for="passInput">Password</label>
       <input type="password" class="form-control" autocomplete="off" id="passInput" />
       <i class="fa fa-lock"></i>
    </div>

/* css */
input:valid + i.fa-lock {
   color: $your-valid-color;
}

/*html*/
密码
/*css*/
输入：有效+i.fa-lock{
颜色：$您的有效颜色；
}

一些注释--

• 您需要将输入标记为所需，否则它将始终为空 有效
• 非空type=“text”元素将有效
• 您可以指定一个正则表达式模式来对有效的内容进行约束，或者使用minlength属性

---

查看完整的文档。标准的html表单/输入字段功能非常强大，因此您只需使用它们就可以完成很多工作

这里有一个解决方案，我已经设法将代码长度缩短了一点。希望这有帮助

$（“.form control”）.focusin（函数（）{
$（this.next（“i”）.css（“color”，“#FFAE00”）；
});
$（“.form控件”）.focusout（函数（）{
$（this）.val（）.length==0？fontColor=“#000”：fontColor=“#FFAE00”；
$（this.next（“i”）.css（“color”，fontColor）；
});
.colorOrange{
颜色：#FFAE00；
}

电子邮件
密码
这是一个文件吗？如果是这样的话，你应该用标记来包围javascript…你的代码有语法错误，也许你把它粘贴错了？“.colorOrange{…}”是语法错误。您还可以显示您的CSS类（colorOrange等）吗？