如何動態更改文本的顏色？

我想代碼的這些線，但並未出現「密碼不匹配」。但主要問題是「密碼匹配」&「密碼不匹配」即將到來。

<script type="text/javascript"> 

function checkPasswordMatch() { 
var password = $("#txtNewPassword").val(); 
var confirmPassword = $("#txtConfirmPassword").val(); 

if (password == confirmPassword) 
    $("#divCheckPasswordMatch").html("Password Matched"); 
else 
    $("#divCheckPasswordMatch2").html("Passwords Don't Match."); 
} 

$(document).ready(function() { 
$("#txtConfirmPassword").keyup(checkPasswordMatch); 
}); 
</script>

這是我的HTML代碼

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
<br /> 
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
<div id="divCheckPasswordMatch2" style="color:red"> 
<div id="divCheckPasswordMatch" style="color:green">

來源

2017-02-21 Vivek Saha

'if（password = confirmPassword）'是錯誤的。這應該是==不= =。還有一些其他的東西也錯在這裏，就像我的密碼不匹配，然後我再試一次，他們這樣做，兩個信息都會顯示出來。 – dman2306

甚至更好：'if（password === confirmPassword）{' –

'='不用於比較。也總是解釋發生了什麼，應該發生什麼，而不是模糊。 –

您的html中的<div>需要關閉。您的瀏覽器不知道如何組織損壞的HTML，所以它可能會呈現你的HTML嵌套<div>的是這樣的：

<div id="divCheckPasswordMatch2" style="color:red"> 
    <div id="divCheckPasswordMatch" style="color:green"> 
    </div> 
</div>

這意味着，當你更換使用JavaScript行HTML：

$("#divCheckPasswordMatch2").html("Passwords Don't Match.");

瀏覽器刪除其他<div>以放入字符串"Passwords Don't Match"。其結果是：

<div id="divCheckPasswordMatch2" style="color:red"> 
    <!-- This other div is removed --> 
    Passwords don't match 
</div>

現在，任何試圖替換#divCheckPasswordMatch文本將失敗，因爲該元素不存在了。

這裏是如何解決這個問題：結束標籤

<div id="divCheckPasswordMatch2" style="color:red"></div> 
<div id="divCheckPasswordMatch" style="color:green"></div>

通過增加關閉標籤，你告訴瀏覽器在哪裏結束你的塊，你在告訴塊是瀏覽器彼此相鄰並且不包含彼此。有了這個改變，你現在可以自由地添加和刪除文本到這兩個div，它不會影響其他div。

現在，讓我們稍微進一步解決這個問題。

@ dman2306正確指出您的代碼將顯示寫入的錯誤消息和成功消息。讓我們通過僅使用一個div來修改該類並更改該類。

使用以下命令：

//HTML5 does not require type tags on your script blocks 
 
    function checkPasswordMatch() { 
 
     var password = $("#txtNewPassword").val(); 
 
     var confirmPassword = $("#txtConfirmPassword").val(); 
 
     var div = $("#messageBlock"); 
 
    
 
     if (password == confirmPassword){ 
 
      $(div).removeClass("bad_password"); 
 
      if(password == "" && confirmPassword == ""){ 
 
       /* 
 
        We do not delete the div. 
 
        We set the html content to 
 
        an empty string. This way 
 
        we can use the DIV again in the future */ 
 
       $(div).html(""); 
 
      }else{ 
 
       $(div).html("Password Matched"); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      $(div).html("Passwords Don't Match."); 
 
      $(div).addClass("bad_password"); 
 
     } 
 
    } 
 
    
 
    $(document).ready(function() { 
 
     $("#txtConfirmPassword").keyup(checkPasswordMatch); 
 
    });

#messageBlock { color: green; } 
 
    #messageBlock.bad_password { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Example</h1> 
 
<p>Please enter passwords to check the behavior of the message div</p> 
 
<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
 
    <br /> 
 
    <input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
 
    <div id="messageBlock"><!-- this is where ALL messages appear, and the color is based on the class name --></div>

運行上面的代碼，看看新的代碼的一個活生生的例子。

這段代碼有以下好處：

通過使用單一消息的div，您一次只顯示一個消息。所有新消息都會替換前面的消息。
顏色沒有被硬編碼到元素中，所以你可以通過改變你的css來改變你的頁面的外觀，它現在位於<style>元素中。
您的JavaScript變得更簡單一些，您只需要擔心添加正確的消息，然後添加或刪除單個類名。默認文本顏色爲綠色，類名稱爲bad_password，文本顏色變爲紅色。

您仍然可以對此設計進行一些改進，但我已根據您的提交提出了建議，以便您可以作爲編碼器進行成長和改進。保持良好的工作，很快你會建立驚人的事情！

來源

2017-02-21 17:11:57

謝謝，它工作正常。但是如果密碼字段保持空白，則不應顯示該消息。爲此，我做了這樣的編碼： 'if（password == empty）{ $（div）.remove; } ' 但它不起作用 –

您不想刪除您的消息div，因爲它會阻止您在將來再次使用它。您可以動態創建和添加div，但使用'if（password == empty）{$（div）.innerHTML =「」; }'它刪除文本並使div變空。 –

如果你希望DIV不再佔用屏幕上的空間（也許你有一個按鈕，當div爲空時你想向上移動），那麼你可以添加'$（div）.hidden = true這行。 '這與'$（div）.visible = false'類似，只不過'hidden'屬性也會摺疊div的尺寸，所以佔用零空間。可見屬性只控制它是否可見。 –

嘗試類似下面有持久的顏色：

if (password == confirmPassword) 
    $("#divCheckPasswordMatch").html("Password Matched").css("color", "green"); 
else 
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.").css("color", "red"); 
}

來源

2017-02-21 16:58:10 maverick

如果我這樣做，我只會有一個DIV消息，然後相應地設置它。然後，如果輸入新密碼，我會清除該消息。

<style> 
    .green { 
     color: green; 
    } 
    .red { 
     color: red; 
    } 
</style> 

<script type="text/javascript"> 
    function checkPasswordMatch() { 
     var password = $("#txtNewPassword").val(); 
     var confirmPassword = $("#txtConfirmPassword").val(); 

     if (password == confirmPassword) { 
      $("#divCheckPasswordMatch").text("Password Matched"); 
      $("#divCheckPasswordMatch").css("color", "green"); 
     } 
     else { 
      $("#divCheckPasswordMatch").text("Passwords Don't Match"); 
      $("#divCheckPasswordMatch").css("color", "red"); 

     } 
    } 

    function clearMessage() { 
     $("#divCheckPasswordMatch").text(""); 
    } 

    $(document).ready(function() { 
     $("#txtNewPassword").keyup(clearMessage); 
     $("#txtConfirmPassword").keyup(checkPasswordMatch); 
    }); 
</script> 

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword"> 
<br /> 
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();"> 
<div id="divCheckPasswordMatch"></div>

來源

2017-02-21 17:03:48 clarmond

如何動態更改文本的顏色？

回答

相關問題