我用div
制作了两个框,用箭头键移动它们,单个框就可以正常工作了。但是当我添加第二个框时,即使我给了他们不同的ID,他们也开始同时移动。我想要实现的是当用户点击空格键时,第一个框被禁用,第二个框被激活。我也搜索了类似的东西,但我找不到任何东西。所以我在这里做了JSFiddle所以你可以仔细看看。
这是我的JQuery代码:
<script>
jQuery(document).keydown(function (e) {
switch (e.which) {
case 37:
jQuery("#cube").stop().animate({ left: '-=10' });
break;
case 38:
jQuery("#cube").stop().animate({ top: '-=10' });
break;
case 39:
jQuery("#cube").stop().animate({ left: '+=10' });
break;
case 40:
jQuery("#cube").stop().animate({ top: '+=10' });
break;
}
});
var space = false;
jQuery(function () {
jQuery(document).keydown(function (evt) {
if (evt.keyCode == 32) {
space = true;
}
});
});
if (space == true) {
jQuery(document).keydown(function (e) {
switch (e.which) {
case 37:
jQuery("#cubetwo").stop().animate({ left: '-=10' });
break;
case 38:
jQuery("#cubetwo").stop().animate({ top: '-=10' });
break;
case 39:
jQuery("#cubetwo").stop().animate({ left: '+=10' });
break;
case 40:
jQuery("#cubetwo").stop().animate({ top: '+=10' });
break;
}
});
}
</script>
非常感谢任何帮助,提前谢谢。
答案 0 :(得分:3)
你忘记在你的jsfiddle中包含jquery。而且您可以使用一个keydown
事件来捕获所有行为。
当用户按空格键时,切换将要移动的目标。
按箭头键时,移动目标。
已编辑:
如果您的预期行为是:只有在按下space
时,箭头键才会影响到#cubetwo
,否则会移动#cube
,然后您可以添加keyup
事件来实现这个,只需使用/* */
中注释掉的部分。
由于添加另一个代码段对于答案来说太长了,我已经创建了一个jsfiddle来测试第二个行为,选择一个你期望的行为。
var space = false;
var target = space ? jQuery("#cube") : jQuery("#cubetwo");
/*
var target = jQuery("#cube");
*/
jQuery(document).keydown(function (e) {
switch (e.which) {
case 37:
target.stop().animate({ left: '-=10' });
break;
case 38:
target.stop().animate({ top: '-=10' });
break;
case 39:
target.stop().animate({ left: '+=10' });
break;
case 40:
target.stop().animate({ top: '+=10' });
break;
case 32:
// Swtich target.
space = !space;
target = space ? jQuery("#cube") : jQuery("#cubetwo");
/*
target = jQuery("#cubetwo");
*/
break;
}
});
/*
jQuery(document).keyup(function (e) {
if (e.which === 32) {
target = jQuery("#cube");
}
});
*/
#cube {
height: 125px;
width: 125px;
border-style: solid;
border-width: 2px;
position: absolute;
background-color: green;
text-align: center;
top: 0px;
left: 0px;
}
#cubetwo {
height: 125px;
width: 125px;
border-style: solid;
border-width: 2px;
position: absolute;
background-color: blue;
text-align: center;
top: 0px;
left: 700px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="cube">
Press arrow keys to move me
</div>
<div id="cubetwo">
Hit space to activate me
</div>
</body>
答案 1 :(得分:1)
你必须这样做:
/* controlled cube */
var whichCube = jQuery("#cube");
/* arrows*/
jQuery(document).keydown(function (e) {
switch (e.which) {
case 37:
whichCube.stop().animate({ left: '-=10' });
break;
case 38:
whichCube.stop().animate({ top: '-=10' });
break;
case 39:
whichCube.stop().animate({ left: '+=10' });
break;
case 40:
whichCube.stop().animate({ top: '+=10' });
break;
}
});
/* space */
jQuery(document).keydown(function (evt) {
if (evt.keyCode == 32) /*space*/ {
/*toggle 1->2, or 2->1 */
if(whichCube == jQuery("#cube"))
whichCube = jQuery("#cubeTwo");
else
whichCube = jQuery("#cube");
}
});
}