我的jQuery為什么不起作用（使用延遲，hasclass，addclass，removeclass，keyUp，keyDown函數）？

Question

因此，該代碼應該執行的操作是，當用戶單擊輸入字段並按下一個鍵時，在鍵入后2秒鍾后該字段應變成紅色。 在按下鍵時，它應該變成黃色。 然后再次按下鍵盤，在2秒鍾后應該變成紅色。

不知道為什么這不起作用。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>
  p { margin: 8px; font-size:16px; }
  .red { background:red;}
  .yellow { background:yellow;}
  .white {background: white;}
  </style>

</head>
<body>
 <form>
  <input id="target" type="text" />
</form>
<br /><br />

<script type="text/javascript">

$("#target").keyUp(function(){//STARTFUNCTION keyUp
if (  $('#target').hasClass("yellow")){//start if
  $('#target').removeClass("yellow");
  }//end if
  if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if

//after 2 seconds, add the class red
$("#target").delay(2000).queue(function(next){//start function
    $(this).addClass("red");
    //next();
}); //end function
}).keydown(function(event) {//start function
   if ( $('#target').hasClass("red")){//start if
  $('#target').removeClass("red");
  }//end if
   if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if
    $(this).addClass("yellow");
});//end function


</script>
</body>
</html>

Answer 1

這是您的文件已更正：

<!DOCTYPE html>
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style>
  p { margin: 8px; font-size:16px; }
  .red { background:red;}
  .yellow { background:yellow;}
  .white {background: white;}
  </style>

</head>
<body>
 <form>
  <input id="target" type="text" />
</form>
<br /><br />

<script type="text/javascript">

$("#target").keyup(function(){//STARTFUNCTION keyUp
if (  $('#target').hasClass("yellow")){//start if
  $('#target').removeClass("yellow");
  }//end if
  if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if

//after 2 seconds, add the class red
$("#target").delay(2000).queue(function(next){//start function
    $(this).addClass("red");
    //next();
}); //end function
}).keydown(function(event) {//start function
   if ( $('#target').hasClass("red")){//start if
  $('#target').removeClass("red");
  }//end if
   if (  $('#target').hasClass("white")){//start if
  $('#target').removeClass("white");
  }//end if
    $(this).addClass("yellow");
});//end function


</script>
</body>
</html>

Answer 2

JavaScript區分大小寫$("#target").keyUp應該是$("#target").keyup 。 您還有一個額外的}); 在腳本的末尾。

Answer 3

未經測試，但是最明顯的錯誤是在Javascript塊的末尾，您有：

});//end function

});

相反，它應該在哪里：

});//end function

Answer 4

這是你想要的？

$('#target').keyup(function () {
    setTimeout('$("#target").attr("class","red");', 2000);
});

$('#target').keydown(function () {
    if ($(this).hasClass('red')) {
        $(this).attr('class', 'yellow');
    }
});

我的jQuery為什么不起作用（使用延遲，hasclass，addclass，removeclass，keyUp，keyDown函數）？

問題描述

4 個解決方案

解決方案1
4 已采納 2012-03-09 15:00:17

解決方案2
2 2012-03-09 15:04:42

解決方案3
1 2012-03-09 15:00:44

解決方案4
1 2012-03-09 15:04:36

我的jQuery為什么不起作用（使用延遲，hasclass，addclass，removeclass，keyUp，keyDown函數）？

問題描述

4 個解決方案

解決方案1 4 已采納 2012-03-09 15:00:17

解決方案2 2 2012-03-09 15:04:42

解決方案3 1 2012-03-09 15:00:44

解決方案4 1 2012-03-09 15:04:36

解決方案1
4 已采納 2012-03-09 15:00:17

解決方案2
2 2012-03-09 15:04:42

解決方案3
1 2012-03-09 15:00:44

解決方案4
1 2012-03-09 15:04:36