Массив JavaScript

Question

Я начал делать игру на память, но у меня есть проблема:

let card = [];

function makeCards() {

  let cardSymbol = [];

  const scorePan = document.querySelector('section');

  scorePan.insertAdjacentHTML('afterend', '<ul class="deck"></ul>');

  const cardDeck = document.querySelector('.deck');


  for (let i = 1; i < 17; i++) {

    card[i] = document.createElement('li');

    card[i].setAttribute('class', 'card');

    cardSymbol[i] = document.createElement('i');

    cardSymbol[i].setAttribute('class', `fa fa-${symbols[i]}`);

    card[i].appendChild(cardSymbol[i]);

    cardDeck.appendChild(card[i]);
  }


}

makeCards();

Итак, в карте массива я сохранил все карты и добавил карты в функцию makeCards, проблемая хочу добавить прослушиватель событий в другой функции для каждой отдельной карты, но если я перебираю элементы с циклом for и я console.log (), то каждый элемент, который он мне показывает, не определен, и это происходит либо когда я пишу цикл вфункция или вне какой-либо функции, но если я console.log (карта);он показывает мне массив, который содержит все элементы массива.Почему я не могу зациклить их, так как у меня есть массив?Или я должен добавить eventListerns к элементам, когда я создаю их в функции makeCards ?????

Answer 1

Мы можем установить один элемент, который является общим предком, в all card elements для прослушивания "click" event, происходящего на нем и / или его потомках.Это возможно из-за того, как событие пузырится.Подробнее об этой процедуре читайте в этой статье о Делегирование событий .

Следующая демонстрация создает 2 массива совпадающих классов FA и перетасовывает их.Элемент-предок создается как deck, а его элементы-потомки - card и face элементов, которые создаются на каждой итерации a for петля.Для каждой card/face предусмотрена только базовая функция flipping , логика сопоставления выходит за рамки OP-вопроса и требует публикации отдельного вопроса.

Демо

Подробности прокомментированы в Демо

/* Hardcode FA classes in symbol array
== Clone symbol array
== Use shuffle() function on both arrays
== Merge both arrays into faces array
*/
var symbol = ['fa-pied-piper-alt', 'fa-heart', 'fa-star', 'fa-star-o', 'fa-paw', 'fa-leaf', 'fa-cube', 'fa-cubes', 'fa-rebel', 'fa-empire'];
var match = symbol.slice(0);
var topCut = shuffle(symbol);
var bottomCut = shuffle(match);
var faces = topCut.concat(bottomCut);

// Create and reference parent element
var stack = document.createElement('main');
stack.id = 'deck';

// for each loop...
for (let c = 0; c < match.length * 2; c++) {

  // Create a card element and add attributes
  var card = document.createElement('a');
  card.href = '#/';
  card.classList.add.apply(card.classList, ['card', 'cover']);

  /* Create a face element and add attributes
  || Note: each face is assigned a FA icon but not .fa class
  */
  var face = document.createElement('i');
  face.classList.add('face');
  face.classList.add(faces[c]);

  // Add each face to a card and each card to the deck (stack)
  card.appendChild(face);
  stack.appendChild(card);
}

// When complete, add deck to DOM
document.body.appendChild(stack);

// Reference deck
var deck = document.getElementById('deck');

/* Register deck to click event
|| When deck and/or its descendant elements are clicked...
|| invoke callback function flip()
*/
deck.addEventListener('click', flip, false);

// Pass Event Object
function flip(event) {

  // Prevent <a> from jumping to a location
  event.preventDefault();

  /* event.target: origin of click event (clicked element)
  || event.currentTarget: element that listens for click (#deck)
  || if the clicked element is NOT #deck...
  */
  if (event.target !== event.currentTarget) {

    //...and if that clicked element is an <a>...
    if (event.target.tagName === "A") {

      /* toggle clicked <a> class .cover and 
      || its child <i> class .fa on/off
      */
      event.target.classList.toggle('cover');
      var trump = event.target.firstElementChild;
      trump.classList.toggle('fa');
    }
  }
}


// Utility function uses Fisher-Yates algorithm to shuffle arrays
function shuffle(array) {
  var i = 0;
  var j = 0;
  var temp = null;
  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
  return array;
}

#deck {
  display: flex;
  flex-flow: row wrap;
  width: 450px;
  height: 300px;
  border-radius: 6px;
  border: 5px inset brown;
  background: green;
}

.card {
  text-decoration: none;
  display: inline-block;
  width: 48px;
  height: 64px;
  border-radius: 6px;
  border: 3px solid #000;
  background: #fff;
  font-size: 40px;
  text-align: center;
  margin: 5px
}

.face {
  transform: translateY(11px);
  pointer-events: none;
  color: inherit;
}

.cover {
  color: transparent;
  background: #fff;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Answer 2

Вам нужен живой слушатель событий.Если вы используете jQuery, вы можете использовать this

или, если вы используете нативный js, вы можете реализовать this