Fatal编程技术网
  • javascript/
  • Javascript 为什么我的jquery不能工作（使用delay、hasclass、addclass、removeclass、keyUp、keyDown函数）？

Javascript 为什么我的jquery不能工作（使用delay、hasclass、addclass、removeclass、keyUp、keyDown函数）？

javascript jquery css

Javascript 为什么我的jquery不能工作（使用delay、hasclass、addclass、removeclass、keyUp、keyDown函数）？,javascript,jquery,css,Javascript,Jquery,Css,因此，代码应该做的是当用户点击输入字段，然后按下一个键，在按键后，2秒钟后，字段应该变成红色。按向下键，它应该变成黄色。然后再次打开键盘，2秒后它应该变成红色 不知道为什么这不起作用 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> p { margin:

因此，代码应该做的是当用户点击输入字段，然后按下一个键，在按键后，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>
这是您的文件更正：

<!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>
这是您的文件更正：

<!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>
未测试，但最明显的错误是，在Javascript块的末尾，您有：

});//end function

});
应改为：

});//end function
未测试，但最明显的错误是，在Javascript块的末尾，您有：

});//end function

});
应改为：

});//end function
这就是你要找的吗

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

$('#target').keydown(function () {
    if ($(this).hasClass('red')) {
        $(this).attr('class', 'yellow');
    }
});
这就是你要找的吗

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

$('#target').keydown(function () {
    if ($(this).hasClass('red')) {
        $(this).attr('class', 'yellow');
    }
});
JavaScript区分大小写$target.keyUp应为$target.keyUp。您还有一个额外的}；在脚本末尾。

JavaScript区分大小写$target.keyUp应为$target.keyUp。您还有一个额外的}；在脚本的末尾。

将此设置为小提琴。@Dave，至少检查一下您的语句。。keyup和keydown存在于核心jQuery中，尽管Pavan的keyup拼写不正确，小写的u。此外，评论不应该只是噪音。。你不需要一个注释来判断它是函数还是一个if start…好吧，我本来可以做得更好的。但是，如果您正在发布生成javascript错误的代码，而您的问题不是为什么这会导致错误，那么您可能应该在发布之前花更多的时间来处理这个问题。将其设置为一个小提琴。@Dave，至少检查一下您的陈述。。keyup和keydown存在于核心jQuery中，尽管Pavan的keyup拼写不正确，小写的u。此外，评论不应该只是噪音。。你不需要一个注释来判断它是函数还是一个if start…好吧，我本来可以做得更好的。但是，如果您发布的代码生成javascript错误，而您的问题不是为什么这会导致错误，那么您可能应该在发布之前花更多时间处理该问题。不要将字符串传递给setTimeout！它使用eval。传递函数。不要将字符串传递给setTimeout！它使用eval。传递函数。谢谢老兄，我的编辑器没有很好地显示相应的花括号。你不需要它，请使用适当的缩进。谢谢老兄，我的编辑器没有很好地显示相应的花括号，你不需要它，使用适当的缩进。感谢火箭-我在其他地方看到它是keyup，并一直使用它-我现在将继续使用api文档。感谢火箭-我在其他地方看到它是keyup，并一直使用它-我现在将继续使用api文档。谢谢DotMat非常感谢您的帮助。谢谢DotMat非常感谢您的帮助。