在 jQuery 中更改颜色答案

【问题标题】：Change color in jQuery在 jQuery 中更改颜色
【发布时间】：2016-07-30 07:20:47
【问题描述】：

到目前为止，我有这段代码可以帮助用户知道密码是否拼写正确，但我想让文本的颜色为绿色/红色以表示匹配/不匹配。

$(function() {

    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do NOT match!");
    });

});

【问题讨论】：

标签： jquery colors

【解决方案1】：

(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        if(password == $(this).val())
        {
           $("#divCheckPasswordMatch").html("Passwords match.");
           $(this).css('color', 'green');
        }else{
          $("#divCheckPasswordMatch").html("Passwords do NOT match!");
          $(this).css('color', 'red');
        }
    });
});

【讨论】：

请添加说明您所做的说明

【解决方案2】：

使用.css()改变文字颜色

$(function() {
$("#txtConfirmPassword").keyup(function() {
    var password = $("#txtNewPassword").val();
    if(password == $(this).val()) {
        $("#divCheckPasswordMatch").html("Passwords match.");
        $("#divCheckPasswordMatch").css("color","green"); 
    } else {
        $("#divCheckPasswordMatch").html("Passwords do NOT match!");
        $("#divCheckPasswordMatch").css("color","red");
    }  
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="txtNewPassword" />
<input type="text" id="txtConfirmPassword" />
<div id="divCheckPasswordMatch" />

【讨论】：

【解决方案3】：

使用这个：

$(function() {
    $("#txtConfirmPassword").keyup(function() {
        var password = $("#txtNewPassword").val();
        $("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do NOT match!").css('color','green');
    });
    });

【讨论】：

【解决方案4】：

设置确认密码

  $("elmLocator").css("color","red");

但是在 keyup 上别忘了改回来。

【讨论】：