Question

我有2个div元素，我希望能够通过单击按钮在屏幕上移动。我还希望能够通过单击2个按钮中的一个来切换活动div。

现在左右移动有效，但是当我切换活动div并尝试向上或向下移动时，两个div元素一起移动！

请指出我正确的方向，我迷失了这个。

您可以在此处查看我正在使用的内容： https://jsfiddle.net/jkries/x1k5yLrf/1/

感谢您的任何建议。

       var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "-=30px" //moves up
               });
           });
       });

<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px;position:relative;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px;position:relative;">Thing 2</div>

</body>

Answer 1

问题在于CSS，这些元素现在依赖于彼此。因此，当您设置margin-top到第一个方格时，它会向下推动另一个方向，然后反向。将position: relative;更改为position: absolute;即可。

更新了 JSFIDDLE 。

请参阅下面的工作代码：

var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
               
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "-=30px" //moves up
               });
           });
       });

#player2{
  top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px; position: absolute;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px; position: absolute;">Thing 2</div>

</body>

或者换句话说，如果你想保持相对位置，移动元素时使用top, bottom, right, left代替margin：

var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
               
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'left' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'left' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'top' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'top' : "-=30px" //moves up
               });
           });
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px; position: relative;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px; position: relative;">Thing 2</div>

</body>

针对.animate（）定位特定的DIV元素

1 个答案: