Question

我用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的新手。任何帮助都感激不尽！谢谢

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

Answer 2

使用HTMLElement方法n = 25000 #chunk row size ## Big_frame dataframe divided into smaller chunks of n into a list list_df = [big_frame[i:i+n] for i in range(0,big_frame.shape[0],n)] ## Create another dataframe with columns names as expected from SQL big_frame_2 = pd.DataFrame(columns=[<Mention all column names from SQL>]) ## Print total no. of iterations print("Total Iterations:", len(list_df)) for i in range(0,len(list_df)): print("Iteration :",i) temp_frame = list_df[i] testList = temp_frame['customer_no'] ## Pass smaller chunk of data to SQL(here I am passing a list of customers) temp_DF = SQL_Query(tuple(testList)) print(temp_DF.shape[0]) ## Append all the data retrieved from SQL to big_frame_2 big_frame_2=big_frame_2.append(temp_DF, ignore_index=True)（source）;

setAttribute

Answer 3

根据您在评论中的要求，如何移动正方形，我举了一个示例，说明如何使用jQuery next()和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>

DOM为子Java脚本分配ID

3 个答案: