Назначение события DOM переменной или массиву

Question

Создание игры на соответствие карточек, полный код здесь https://codepen.io/3noki/pen/xjyErQ

Я пытаюсь назначить событие перенаправления карты в список / массив или переменную, которую я предполагаю, чтобы я мог проверить, еслиэто соответствует следующему событию переворачивания второй карты.Но этот пример, приводящий к ошибкам, был помещен в функцию openedCards().

let card1 =  $(event.target).toggleClass('open show');

. Если есть лучший метод для сопоставления значения с более поздним значением, я его еще не изучил., но это то, что я в настоящее время знаю.

Кроме того, я реализовал счетчик, который должен увеличиваться до значения 1, затем следующее событие до значения 2, и если они не совпадают, сброситьОбе карты, я смогу проверить это после того, как эта первая часть сработает, но это указано в функции openedCards().

Я думаю, что самая большая вещь, с которой я борюсь, - это указание или сохранение 1-й иВторые события из DOM или выяснение того, как ссылаться на это событие, как в массиве [это событие].

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

назначить функцию

массив функций

Выдержка из кода

function cardFlip(event) { 
    $(event.target).toggleClass('open show') 
    openedCards();
} 

function openedCards(i) { 
    if (openedCardsList.length === 0) {
        openedCardsList.push(i); 
         let card1 = $(event.target).toggleClass('open show');
    } else if (openedCardsList.length === 1) { 
        openedCardsList.push(i); 
        let card2 = $(event.target).toggleClass('open show');
    } else {
        openedCardsList = []; 
        cardFlip(card1);  
        cardFlip(card2);
    }
}

Answer 1

Прежде всего, openedCards принимает один параметр i.вы не передаете значение openedCards при вызове из cardFlip, поэтому вы нажимаете undefined на openedCardsList.

Во-вторых, вы вызываете $(event.target).toggleClass('open show'); в cardFlip и openedCards.Поскольку вы переключаетесь, было бы лучше переключаться только при необходимости, а не переключаться, а затем отключать в некоторых случаях.

В-третьих, вы устанавливаете значения card1 и card2 в отдельных блоках вашегоусловно, поэтому они никогда не будут определены в вашем else блоке:

function openedCards(i) {
  if (openedCardsList.length === 0) {
    openedCardsList.push(i);
    let card1 =  $(event.target).toggleClass('open show');
  }
  else if (openedCardsList.length === 1) {
    openedCardsList.push(i);
    let card2 =  $(event.target).toggleClass('open show');
  }
  else{
    openedCardsList = [];
    // card1 and card2 are undefined here
    cardFlip(card1);
    cardFlip(card2);
  }
}

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

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

let lastCard = null;

function cardFlip(event) {
  const thisCard = $(event.target);
  const cardClass = $(event.target).children("i").className;

  thisCard.toggleClass('open show')

  if (lastCard) {
    if (lastCard !== thisCard) {
        // The cards don't match
        cardFlip(lastCard);
        cardFlip(thisCard);
    } else {
      // you found a match!!!
      matchedCards++
    }
    lastCard = null;
  } else {
    // This is the first card flipped
    lastCard = cardClass;
  }
}