javascript - 在文本框中键入时使用 jQuery 更改图标的颜色

Question

我有一个文本框和一个用于电子邮件的信封图标，如下所示:

<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope  form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>

然后我添加了 jQuery 来更改电子邮件图标的颜色，无论他们输入的电子邮件是否正确。它在我使用“alert”时起作用，但当我想实际更改颜色而不是显示 alert 时不起作用。

$("#AdminEmail").keyup(function () {
    var $email = $(this).val();
    validateEmail($email);
});
function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if (!emailReg.test($email)) {
        $(".glyphicon-envelope").CSS('color', 'red');
    } else {
        $(".glyphicon-envelope").CSS('color', 'blue');
    }
}

Answer 1

我认为您的问题是 CSS 需要小写。

$(".glyphicon-envelope").css('color', 'red');

如果你想变得非常聪明，你可以将整个部分组合成

$(".glyphicon-envelope").css('color', emailReg.test($email) ? 'blue' : 'red');