在点击事件中，如何将DIV区域移至特定ID

Question

我有一个10 x 10板和一个按钮（在下面给出的演示中，我将其最小化为3 x 3）。当用户单击按钮时，系统会生成一个随机数1到9。

document.getElementById("btn").addEventListener("click",function(){
var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
  alert(num);/* check the no*/
  if(num === "1"){
    /*i need to move the red circle to box no 1*/
    }else if(num === "2"){
      /*i need to move the red circle to box no 2*/
      }
  /*and so on upto 9*/
  });

html,body{
  width:100%;height:100%;
  }
#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }
#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }

<div id="crcl"> </div> <button id="btn">move circle</button>
<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>

这里每个盒子的ID从A1到A9。当用户每次按下按钮时，我需要根据此随机数将红色圆形DIV移动到相应的框（即，如果您获得数字3，红色圆圈需要移动到Box3（＃A3））。我该如何实现？

Answer 1

我建议您使用document.getElementById和htmlnode＃appendchild

这样，您将圆圈移至某些Divs的孩子。

当您在现有节点上执行附录时，它将从现在的任何地方分离，然后搬到新的父母。

document.getElementById("btn").addEventListener("click",function(){
var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
  alert(num);/* check the no*/
  var parent = document.getElementById('a'+num);
  var circle = document.getElementById('crcl');
  parent.appendChild(circle);
  /*and so on upto 9*/
  });

html,body{
  width:100%;height:100%;
  }
#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }
#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }

<div id="crcl"> </div> <button id="btn">move circle</button>
<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>

Answer 2

您可以将球附加到正确的div，不确定它是最好的主意，但它确实在其中移动了球

document.getElementById("btn").addEventListener("click",function(){
var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
    moveBall(num);
});
function moveBall(num) {
  var ball = document.getElementById('crcl');
  var square = document.getElementById('a' + num);
  square.appendChild(ball);
}

Answer 3

在广场内的圆圈中添加了更多CSS。

document.getElementById("btn").addEventListener("click", function() {
  var num = Math.floor(Math.random() * 100);
  num = num % 9; /*generate a random no between 0 to 8*/
  num = num + 1; /*generate a random no between 1 to 9*/
  var currentSquare = document.getElementById("a"+num);
  var circle = document.getElementById("crcl");
  circle.style.display = "block";
  currentSquare.appendChild(circle);
});

html,
body {
  width: 100%;
  height: 100%;
}
#board {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
#one,
#two,
#three {
  width: 100%;
  height: 100px;
  float: left;
}
.flag-point {
  width: 100px;
  float: left;
  height: 100%;
  position: relative;
}
#a8,
#a2,
#a4,
#a6 {
  background-color: green;
}
#crcl {
  display: none;
  width: 30px;
  height: 30px;
  background-color: red;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  margin: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

<div id="crcl"></div>
<button id="btn">move circle</button>
<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>

Answer 4

您可以将其与这样的jQuery一起使用：

document.getElementById("btn").addEventListener("click",function(){
var num = Math.floor(Math.random() * 100);
num = num % 9;/*generate a random no between 0 to 8*/
num = num + 1;/*generate a random no between 1 to 9*/
  alert(num);/* check the no*/
  var parent = $("#a"+num);
  var circle = $("#crcl");
  parent.append(circle);
  /*and so on upto 9*/
  });

html,body{
  width:100%;height:100%;
  }
#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }
#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="crcl"> </div> <button id="btn">move circle</button>
<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>

Answer 5

也许您可以做这样的事情：

document.getElementById("btn").addEventListener("click",function(){
  var num = Math.floor(Math.random() * 100);
  num = num % 9;/*generate a random no between 0 to 8*/
  num = num + 1;/*generate a random no between 1 to 9*/
  var target = document.querySelector('#a'+num);
  var circle = document.querySelector('#crcl');
  circle.remove();
  target.append(circle);
  });

这是演示：http：//codepen.io/anon/pen/pboakb