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

すでに述べたバグのほかに、これを試してください。これらの2つのクラスを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

$(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");
 }

 });
 });

Answer 3

バグがあります:

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

次のようにする必要があります。

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

また、Javascript の if ステートメントを囲む中括弧を決して省略しないでください。