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，则红色圆圈需要移动到方框3（＃a3））。我怎样才能做到这一点？

Answer 1

我建议您使用document.getElementById和HTMLNode#appendChild

这样你就可以将圆圈移动成某些div的孩子。

当您在现有节点上执行appendChild时，它将从现在的任何位置分离，并移动到新的父节点。

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一样使用它：

＆＃13;

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

＆＃13;

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%;
  }

＆＃13;

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

＆＃13;

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

如何在点击事件中将div区域移动到特定id？

5 个答案: