Question

我用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>

非常感谢任何帮助，提前谢谢。

Answer 1

你忘记在你的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>

Answer 2

你必须这样做：

/* 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");
            }
        });

        }

如何在两个div之间切换运动？

2 个答案: