15 개의 퍼즐 게임을 위해 Javascript에서 HTML div에 액세스하는 방법은 무엇입니까?

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 문서를 변경하지 않아도됩니다. 내가 당신을 위해 당신의 숙제를하려고하지만, 당신이 올바른 방향으로 찔러하려는 경우 아니에요

Answer 1

만약 내가 제대로 이해하고

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

또는 자바 스크립트, 문제는 N에서 div 요소의 무리 (= 4) 열을 배열하는 방법이다.

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

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

나는 그것을 테스트하지 않았지만

,이 DIV 요소의 수와 함께 작동합니다.

참고 :

• 내가 기술이 here 설명 사용하고, 쉽게 div의 위치를하지 window.onLoad
• window.onload입니다. CSS 만 사용하면 같은 결과를 얻을 수 있습니다. 사실 모든 자바 스크립트 코드는 CSS 속성을 설정합니다.
• 이 경우 puzzleArea에 포함 된 사업부의 모든 자식 요소 (내가

Answer 2

...

당신은 당신이 대략 여기 MDN에서 읽을 수 childNodes에,에 보일 것입니다.

또 다른 좋은 아이디어는 innerHTML 또는 심지어 innerText입니다.

과제에 대한 행운을 빕니다! 내가 무엇에 완전히 명확하지 않다

Answer 3

..

수단 "나는 이미 존재하는 HTML에서 이러한 div에 액세스 할 수 있습니다."

당신은 무엇을 시도 했습니까?

데이터 속성을 추가하고이를 참조 할 수 있습니다. jQuery nth-of-type과 같은 라이브러리를 사용하여 대상을 지정할 수 있습니다. 예.

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 4

가 여기에 CSS는 대답이다 children 배열 (documentation)를 사용해 효율적으로 활용하려면 다음

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

CSS 사용 인 flexbox합니다.

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