将 DOM 事件分配给变量或数组

Question

构建卡牌配对游戏，完整代码在这里https://codepen.io/3noki/pen/xjyErQ

我正在尝试将翻转卡片的事件分配给列表/数组或我猜的变量，因此我可以检查它是否匹配下一个翻转第二张卡片的事件。但是，这个例子，是导致错误的，被放在函数openedCards()中。

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

如果有更好的方法来匹配一个值到后面的值我还没有学过，但这是我目前知道的。

另外，我已经实现了一个计数器，它应该递增到 1 的值，然后下一个事件到 2 的值，如果它们不匹配，重置两张卡，我将能够在之后测试它这第一部分有效，但在函数openedCards() 中列出。

我认为我最困难的事情是从 DOM 指定或保存第一个和第二个事件，或者弄清楚如何在数组中引用这个事件[这个事件]。

我查看了以下其他一些示例，但尝试这些示例均未成功。

assign function

array of functions

代码摘录

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。从cardFlip 调用它时，您没有将任何值传递给openedCards，因此您将undefined 推送到openedCardsList。

其次，您在cardFlip 和openedCards 中都调用了$(event.target).toggleClass('open show');。由于您正在切换，因此最好只在需要时切换，而不是在某些情况下切换然后取消切换。

第三，您将 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;
  }
}