html - 需要脚本通过输入更改 div 背景.. 不工作

Question

我想更改包含我的输入字段的 DIV 的背景颜色。当您在输入中键入数据时，我的代码工作正常，背景颜色变为红色。但是当我返回并删除输入字段空白的数据时，背景不会恢复到原来的颜色。

我需要 DIV 的背景颜色在空白时恢复到原来的颜色。

我究竟做错了什么？

这是我的代码：

<script>
$(document).ready(function(){

$("#id").keypress(function() {
if($("#id").val().length > 0) $("#in").css("background-color", "red");
 else {
   if($("#id").val().length = 0) $("#in").css("background-color", "grey"); 
 }

 });
 });
 </script>

Answer 1

除了已经提到的错误，试试这个。将这两个类放在您的 css 文件中：

.greyColor
{
background-color: grey;
}

.redColor
{
background-color: red;
}

并在您的 javascript 中使用 addClass 和 removeClass 函数：

<script>
$(document).ready(function(){
$("#id").keypress(function() {
if($("#id").val().length > 0)
{
    $("#in").addClass("redColor");
}
else {
   if($("#id").val().length == 0) 
{
$("#in").addClass("greyColor");
$("#in").removeClass("redColor");
}
}

});
});
</script>

Answer 2

你有一个错误：

else {
if($("#id").val().length = 0)

应该：

else {
if($("#id").val().length == 0)

此外，永远不要在 Javascript 中省略 if 语句周围的大括号。

Answer 3

$(document).ready(function(){

$("#id").keypress(function() {
if($("#id").val().length > 0) $("#in").css("background-color", "red");
 else {
  if($("#id").val().length == 0) $("#in").css("background-color", "grey");
 }

 });
 });