因此，当我按下'a'键时，我试图使用按键功能，我希望所有div在1秒的时间内将高度和宽度向上移动50px，向后拉伸25px；当我按'b'键使div向下移动50像素并缩小25像素时。我已经为脚本准备了文档，但是我无法使功能正常运行。下面是我的代码的伪装。显然我的代码出了点问题，由于某种原因，我75岁的教授在您提出疑问时就大喊大叫。我在屏幕上的不同区域放置了8个div，目标是上下移动它们。我显然知道我的代码出了点问题，但是我不确定在哪里。课堂上给我们的笔记也不起作用，这些笔记直接从他的黑板布局中拉出。我的脚本根本不起作用。我使用的属性错误吗？
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<style type="text/css">
.divs {
position: absolute;
height: 100px;
width: 100px;
border: 2px solid red;
background-color: yellow;
}
#div1 {
left: 40px;
top: 125px;
}
#div2 {
right: 45px;
bottom: 27px;
}
#div3 {
left: 85px;
top: 352px;
}
#div4 {
right: 258px;
bottom: 323px;
}
#div5 {
left: 450px;
top: 587px;
}
#div6 {
right: 198px;
top: 498px;
}
#div7 {
left: 375px;
top: 450px;
}
#div8 {
right: 425px;
bottom: 575px;
}
</style>
</head>
<body>
<div class="divs" id="div1">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div2">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div3">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div4">
<h3>
Chris
</h3>
</div>
<div class="divs" id="div5">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div6">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div7">
<h3>
Lynch
</h3>
</div>
<div class="divs" id="div8">
<h3>
Lynch
</h3>
</div>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
$("div").animate({'top': '50px',
'width': '+=25px',
'height': '+=25px' }, 1000);
$(document).ready(function() {
$('div').keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
$("div").animate({'bottom': '50px',
'width': '-=25px',
'height': '-=25px' }, 1000);
}
</script>
</body>
</html>
几件事：
您通常不会在div元素上获得键盘事件。您首先需要在所有div中使用div中的tabindex属性，例如<div class="divs" id="div1" tabindex="1">。然后，他们将在焦点对准时触发键盘事件。
charcode中的字符串通常是大写的，取决于事件。为了安全起见，我建议将测试更改为String.fromCharCode(e.which).toLowerCase() == 'a'。
您的摘要中缺少很多括号。如果不是由于复制/粘贴部分脚本而引起的，也请对其进行修复。
您的脚本缺少很多}和)。同样，div通常不会响应按键事件，因为它通常不会获得键盘焦点。更好地使用例如document。
此外，最好使用$('.divs')（而不是$('div')）制作动画，以防止页面上的其他div动画化。
结果：
$(document).ready(function() {
$(document).keypress(function(e) {
if (String.fromCharCode(e.which) == 'a') {
console.log("Key: a");
$(".divs").animate({
'top': '50px',
'width': '+=25px',
'height': '+=25px'
}, 1000);
}
});
$(document).keypress(function(e) {
if (String.fromCharCode(e.which) == 'b') {
console.log("Key: b");
$(".divs").animate({
'bottom': '50px',
'width': '-=25px',
'height': '-=25px'
}, 1000);
}
})
}).divs {
position: absolute;
height: 100px;
width: 100px;
border: 2px solid red;
background-color: yellow;
}
#div1 { left: 40px; top: 125px; }
#div2 { right: 45px; bottom: 27px; }
#div3 { left: 85px; top: 352px; }
#div4 { right: 258px; bottom: 323px; }
#div5 { left: 450px; top: 587px; }
#div6 { right: 198px; top: 498px; }
#div7 { left: 375px; top: 450px; }
#div8 { right: 425px; bottom: 575px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divs" id="div1"><h3>Chris</h3></div>
<div class="divs" id="div2"><h3>Chris</h3></div>
<div class="divs" id="div3"><h3>Chris</h3></div>
<div class="divs" id="div4"><h3>Chris</h3></div>
<div class="divs" id="div5"><h3>Lynch</h3></div>
<div class="divs" id="div6"><h3>Lynch</h3></div>
<div class="divs" id="div7"><h3>Lynch</h3></div>
<div class="divs" id="div8"><h3>Lynch</h3></div>