jQuery html更改颜色

-1

当前我已使其工作。但还有一件事我想添加一些像Color一样的东西。从红色到绿色。以下代码如下。jQuery html更改颜色

function checkPasswordMatch() { 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 

    if (password != confirmPassword) 
     $("#pwdWarning").html("Passwords do not match!"); 
    else 
     $("#pwdWarning").html("Passwords match."); 
}

如何使“密码不匹配！”红色，而“密码匹配”绿色？

来源

2014-11-05 Anthosiast

CSS是很好的地方开始 – ethorn10 2014-11-05 04:49:49

你为什么不'谷歌jQuery的css' – 2014-11-05 04:54:59

试试这个：

function checkPasswordMatch() { 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 

    if (password != confirmPassword) 
     $("#pwdWarning").html("Passwords do not match!").css('color', 'red'); 
    else 
     $("#pwdWarning").html("Passwords match.").css('color', 'green'); 
}

来源

2014-11-05 04:51:52 amit

您可以使用.css()设置背景颜色，请参见下面的代码

function checkPasswordMatch() { 
    var password = $("#textpwd").val(); 
    var confirmPassword = $("#textcfmpwd").val(); 

    if (password != confirmPassword) 
    { 
     $("#pwdWarning").html("Passwords do not match!"); 
     $("#pwdWarning").css('background-color','red'); 
    } 
    else 
    { 
     $("#pwdWarning").html("Passwords match."); 
     $("#pwdWarning").css('background-color','green'); 
    } 
}

DEMO

或者您也可以使用CSS类新添加背景颜色，请参见下面的代码

CSS

.red{background-color:red;} 
.green{background-color:green;}

jQuery的

function checkPasswordMatch() { 
     var password = $("#textpwd").val(); 
     var confirmPassword = $("#textcfmpwd").val(); 

     if (password != confirmPassword) 
     { 
      $("#pwdWarning").html("Passwords do not match!"); 
      $("#pwdWarning").addClass('red').removeClass('green'); 
     } 
     else 
     { 
      $("#pwdWarning").html("Passwords match."); 
      $("#pwdWarning").addClass('green').removeClass('red'); 
     } 
    }

DEMO

来源

2014-11-05 04:50:55

我已经试过这一点，它不工作。：/ – Anthosiast 2014-11-05 04:52:45

任何控制台错误？你可以与你的问题陈述共享一个jsfiddle链接吗？ – 2014-11-05 04:54:39

看到这工作对我来说http://jsfiddle.net/yv78yr2c/1/ – 2014-11-05 04:59:33

if (password != confirmPassword) 
{ 
    $("#pwdWarning").html("Passwords do not match!"); 
    $("#pwdWarning").css("color","red"); 
} 
else 
{ 
    $("#pwdWarning").html("Passwords match."); 
    $("#pwdWarning").css("color","green"); 
}

来源

2014-11-05 04:51:20

您可以使用.css()这样的：

if (password != confirmPassword) 
    $("#pwdWarning").html("Passwords do not match!").css("color", "red"); // can use background-color too. 
else 
    $("#pwdWarning").html("Passwords match.").css("color","green");// can use background-color too.

来源

2014-11-05 04:51:24

您可以将CSS类添加到邮件

if (password != confirmPassword) 
     $("#pwdWarning").html("<span class='error'>Passwords do not match!</span>"); 
    else 
     $("#pwdWarning").html("<span class='success'>Passwords match.</span>");

而且在CSS文件

.error{ 
color:red 
} 
.success{ 
color:green}

来源

2014-11-05 04:52:06 WisdmLabs

这太重复了。他应该能够假设一个条件是真实的（匹配与否）。然后在运行时调整。 – Dawson 2014-11-05 04:56:16

另一种方式来做到这一点是增加一类具有相应的CSS添加CSS到这些类，如果你不不想将其添加到内联中。

JS：

if (password != confirmPassword) 
    $("#pwdWarning").html("Passwords do not match!").addClass('red-text'); 
else 
    $("#pwdWarning").html("Passwords match.").addClass('green-text');

CSS：

.red-text {color: red;} 
.green-text {color: green;}

来源

2014-11-05 04:59:56

jQuery html更改颜色

回答

相关问题