Question

我一直致力于这项任务，到目前为止还没有成功地让我的代码工作。我必须从现有的HTML文件中访问这些div：

<div id="puzzlearea">
            <!-- the following are the actual fifteen puzzle pieces -->
            <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
            <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>
            <div>9</div>  <div>10</div> <div>11</div> <div>12</div>
            <div>13</div> <div>14</div> <div>15</div>
        </div>

到目前为止，这是我目前的代码迭代，我也无法开始工作：

"use strict";

var ROWS = 4;
var emptyRow = 3;
var emptyCol = 3;
var SQSIZE = 100;

function pageLoad() {
    createPuzzle();
    document.getElementById("shufflebutton").onclick = shufflePuzzle;
}

window.onLoad = pageLoad;

function createPuzzle() {
    for (var i = 1; i < 16; i++) {
        var square = $$("puzzlearea div")[i];
        var row = Math.floor(i / ROWS);
        var col = Math.floor(i - row / ROWS);
        square.id = "square_" + row + "_" + col;
        square.className = "puzzlepiece";
        square.style.top = (col * SQSIZE) + "px";
        square.style.left = (row * SQSIZE) + "px";
        square.style.backgroundPosition = (-col * SQSIZE) + "px" + (-row * SQSIZE) + "px";
    }
}

任何帮助都可以让拼图正确显示。分配方向还建议我不要使用2D阵列，因此我已经明确指出，以满足要求。顶部的变量声明直接基于赋值指令。

我也可以对现有的HTML文档进行NO更改。

Answer 1

我并不完全清楚......

“我必须从已经存在的HTML中访问这些div”。

你有什么尝试？

您可以追加数据属性并引用它。您可以使用像jQuery nth-of-type这样的库来定位。例如。

var seconddiv = jQuery('#puzzlearea div:nth-child(2)');

或javascript

var myPuzzle = document.getElementById('puzzlearea');
var myPuzzleItems = myPuzzle.getElementsByTagName('div');

for (i = 0; i < myPuzzleItems.length; ++i) {
  // logic for doing something with the elements 
}

Answer 2

如果我理解正确，问题是如何在n（= 4）列中安排一堆div元素。

＆＃13;

"use strict";

var COLS = 4;
var emptyRow = 3;
var emptyCol = 3;
var SQSIZE = 100;

function pageLoad() {
  createPuzzle();
  //document.getElementById("shufflebutton").onclick = shufflePuzzle;
}

window.onload = pageLoad;

function createPuzzle() {
  var puzArea = document.getElementById("puzzlearea");
  puzArea.style.position = "relative";
  var numSquares = puzArea.children.length;


  for (var i = 0; i < numSquares; i++) {
    var child = puzArea.children[i];
    child.style.position = "absolute";
    child.style.left = (SQSIZE * (i % COLS)) + "px";
    child.style.top = SQSIZE * Math.floor((i / COLS)) + "px";
  }
}

＆＃13;

<div id="puzzlearea">
  <!-- the following are the actual fifteen puzzle pieces -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

＆＃13;

虽然我还没有对它进行测试，但这应该适用于任意数量的div元素。

备注：

window.onload不是window.onLoad

为了轻松定位div，我使用了here描述的技术。仅使用css就可以实现同样的目的。事实上，所有Javascript代码都设置了css属性。

要获取包含div的所有子元素（在本例中为puzzleArea），我使用了children数组（documentation）

Answer 3

以下是仅限CSS的答案：

<div id="puzzlearea">
  <!-- the following are the actual fifteen puzzle pieces -->
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

使用flexbox的CSS。

#puzzlearea {
  display: flex;
  justify-content: flext-start;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
}
#puzzlearea > div {
  min-width:25%;
}

Answer 4

我不打算为你做功课，但如果你想在正确的方向上轻推......

您应该查看childNodes，您可以在此处阅读MDN。

另一个好主意可能是阅读innerHTML甚至innerText。

祝你好运！

如何在15个益智游戏的Javascript中访问HTML div？

4 个答案: