0

我创建了一个带有 div、class 和 id 的网格。我想随机创建一个黄色方块，我想分配一个 id='yellowSquare' 我该怎么做？

var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
  var square = document.createElement("div");
  square.className = 'square';
  square.id = 'square' + i;
  grid.appendChild(square);
}

var playerOne = [];

while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());


  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);

    var drawPone = document.getElementById('square' + randomIndex);
    drawPone.style.backgroundColor = 'yellow';
  }
}
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}

#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
<div id="grid-box"></div>

我是 Javascript / jQuery 的新手。任何帮助都感激不尽 ！谢谢

4

3 回答 3

1

您的问题有两种选择。您可以更改已经从您的代码中创建的黄色方块的 id，或者在该方块中创建一个子元素，这看起来与您当前的解决方案相同。创建一个新的子元素将让您保留网格的数字 id 模式：

更改 ID：

var element = document.getElementById('square' + randomIndex)
element.id = "yellowSquare";

在里面添加新元素：

var node = document.createElement("DIV");
node.id = "yellowSquare";
node.style = "background-color:yellow;height:100%;width:100%;";
var element = document.getElementById('square' + randomIndex)
element.appendChild(node);

我将 div 子项的样式设置为 100% 的宽度和高度，因为它没有内容，并且如果没有指定任何内容，将获得 0 值。这应该使它填充父容器。

还有多种其他方法可以实现相同的结果，例如使用 JQuery。

于 2019-02-05T15:21:39.807 回答
0

使用 HTMLElement 方法setAttribute（源）；

...

var drawPone = document.getElementById('square' + randomIndex);
drawPone.style.backgroundColor = 'yellow';
drawPone.setAttribute('id', 'yellowSquare');

...
于 2019-02-05T15:10:56.313 回答
0

正如您在评论中要求的如何移动正方形，我举了一个例子，您可以如何使用 jQuerynext()和prev()函数左右移动它。但是，由于您的 html 元素是一维的，因此向上/向下移动它们并检查侧面是否有碰撞并不容易。最好用行和列来创建你的 html 表，这样就可以创建一个二维的游戏场。

还添加了一个 YellowSquery 类用于选择$drawPone.addClass('yellowSquare');。

此外，由于您喜欢使用 jQuery，我将您现有的代码更改为 jQuery 函数。可能会帮助您学习框架。

var $grid = $("#grid-box");
for (var i = 1; i <= 100; i++) {
  var $square = $("<div>");
  $square.addClass('square');
  
  $square.attr('id','square' + i);
  $grid.append($square);
}


var playerOne = [];

while (playerOne.length < 1) {
  var randomIndex = parseInt(99 * Math.random());

  if (playerOne.indexOf(randomIndex) === -1) {
    playerOne.push(randomIndex);

    var $drawPone = $('#square' + randomIndex);
    $drawPone.addClass('yellowSquare');
  }
}

$('#button_right').on('click', function(){
  $yellowSquare = $('.yellowSquare')
  $yellowSquareNext = $yellowSquare.next();
  $yellowSquare.removeClass('yellowSquare');
  $yellowSquareNext.addClass('yellowSquare');
});

$('#button_left').on('click', function(){
  $yellowSquare = $('.yellowSquare')
  $yellowSquarePrev = $yellowSquare.prev();
  $yellowSquare.removeClass('yellowSquare');
  $yellowSquarePrev.addClass('yellowSquare');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}

#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}

.yellowSquare {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-box"></div>

<button id="button_left">left</button>
<button id="button_right">right</button><br>

于 2019-02-05T15:47:12.230 回答