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更改顏色

回答

相關問題