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不工作（使用delay，hasclass，addclass，removeclass，keyUp，keyDown函数）？

4 个答案: