Передайте элементы многомерного массива в Div в Js - PullRequest
Новая
       9

Передайте элементы многомерного массива в Div в Js

0 голосов
/ 08 мая 2018

Я посмотрел и не нашел решения для моей проблемы. У меня решетка похожа на головоломку. 

  <div id="grid-container">
      <div class="item" id="item1"><a href="#"></a></div>
      <div class="item" id="item2"><a href="#"></a></div>
      <div class="item" id="item3"><a href="#"></a></div>
      <div class="item" id="item4"><a href="#"></a></div>
      <div class="item" id="item5"><a href="#"></a></div>
      <div class="item" id="item6"><a href="#"></a></div>
      <div class="item" id="item7"><a href="#"></a></div>
      <div class="item" id="item8"><a href="#"></a></div>
      <div class="item" id="item9"><a href="#"></a></div>
      <div class="item" id="item10"><a href="#"></a></div>
      <div class="item" id="item11"><a href="#"></a></div>
      <div class="item" id="item12"><a href="#"></a></div>
      <div class="item" id="item13"><a href="#"></a></div>
      <div class="item" id="item14"><a href="#"></a></div>
      <div class="item" id="item15"><a href="#"></a></div>
      <div class="item" id="item16"><a href="#"></a></div>
      <div class="item" id="item17"><a href="#"></a></div>
      <div class="item" id="item18"><a href="#"></a></div>
      <div class="item" id="item19"><a href="#"></a></div>
      <div class="item" id="item20"><a href="#"></a></div>
      <div class="item" id="item21"><a href="#"></a></div>
      <div class="item" id="item22"><a href="#"></a></div>
      <div class="item" id="item23"><a href="#"></a></div>
      <div class="item" id="item24"><a href="#"></a></div>
      <div class="item" id="item25"><a href="#"></a></div>
      <div class="item" id="item26"><a href="#"></a></div>
      <div class="item" id="item27"><a href="#"></a></div>
      <div class="item" id="item28"><a href="#"></a></div>
      <div class="item" id="item29"><a href="#"></a></div>
      <div class="item" id="item30"><a href="#"></a></div>
      <div class="item" id="item31"><a href="#"></a></div>
      <div class="item" id="item32"><a href="#"></a></div>
      <div class="item" id="item33"><a href="#"></a></div>
      <div class="item" id="item34"><a href="#"></a></div>
      <div class="item" id="item35"><a href="#"></a></div>
      <div class="item" id="item36"><a href="#"></a></div>
    </div>

и у меня есть массив того, чем я хочу заполнить головоломку: 

var ws = [
    ['A', 'P', 'P', 'L', 'E', 'P'],
    ['A', 'G', 'C', 'A', 'A', 'I'],
    ['A', 'R', 'A', 'A', 'A', 'Z'],
    ['A', 'A', 'A', 'A', 'T', 'Z'],
    ['P', 'P', 'A', 'A', 'A', 'A'],
    ['A', 'E', 'P', 'R', 'A', 'Y']
];

Я также создал класс для распечатки массива. 

class Puzzle {

  constructor(width, height) {
    this.width = (width)? width : 6;
    this.height = (height)? height : 6;

    if(this.width != this.height)
      throw "height and width must be the same"
  }
  print(){
    console.log(ws)
  }
}

puz = new Puzzle(6, 6);

puz.print();

Что я хочу сделать, это передать выходные данные массива в каждый div с идентификаторами: item1..36.

Я использовал 

document.getElementById('myArray').innerHTML = ws;

чтобы попытаться заставить его работать, но он не работает. Пожалуйста, мне нужен лучший подход к этому.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

нужно создать матрицу на конструкторе, 

class Puzzle {

  constructor(width, height) {
   var ws = [
    ['A', 'P', 'P', 'L', 'E', 'P'],
    ['A', 'G', 'C', 'A', 'A', 'I'],
    ['A', 'R', 'A', 'A', 'A', 'Z'],
    ['A', 'A', 'A', 'A', 'T', 'Z'],
    ['P', 'P', 'A', 'A', 'A', 'A'],
    ['A', 'E', 'P', 'R', 'A', 'Y']
];

    if(this.width != this.height)
      throw "height and width must be the same"
  }
  print(){
    console.log(this)
  }
}

puz = new Puzzle(6, 6);

теперь вы можете создать функцию, которая обновляет страницу и помещает значения в элементы: вы помещаете все элементы в одномерный массив и затем итерации элементов с 2 для цикла: 

function updatePage(var x){

    var elements = document.getElementsByClassName("item");
    var k = 0;

    for(var i = 0; i < puzzle.height; i++){
        for(var j = 0; j < puzzle.width; j++){
            elements[k].innerHTML = x.grid[i][j];
            k++;
        }
    }
}

и, наконец, вы можете вызвать вашу функцию для просмотра элементов сетки на странице: 

updatePage(puzz);
0 голосов
/ 08 мая 2018

Вы можете попробовать это внутри вашей функции print. (я думаю, что ваш print будет обновлять пользовательский интерфейс) 

print() {
  for(var i =1 ; i<= this.height; i++){
    for(var j = 1; j <= this.width; j++) {
      document.getElementById(`item${(i-1) * this.height + j}`).innerHTML = ws[i-1][j-1];
    }
  }
}

Надеюсь, это поможет!

...