如何使用java-script和jquery为列表中重复单击的标签存储类名？

Question

我正在使用html，css和javascript创建一个记忆游戏，要求用户将一组牌相互匹配。当用户点击它们并将其存储在列表中时，我目前仍然在提取代表卡类型的卡类名称。当用户点击一张卡片时，我设法只存储了一个类名，但是当我尝试将其用于下一张卡并在列表中存储类名时，我失败了。我尝试使用for和while循环。这是我的代码：

卡片的HTML部分：

<li class="card">
  <i class="car"></i>
</li>
<li class="card">
  <i class="cat"></i>
</li>
<li class="card">
  <i class="car"></i>
</li>
<li class="card">
  <i class="cat"></i>
</li>

JavaScript部分：

for (var i=0, i<2, i++) {
  $(".card").click(function() {
    clickedList[i] = $(this).children().attr("class");
  });
}

请注意，我已将clickedList作为全局数组。

我真正想做的事情如下：

1. 单击一张卡并将其类名存储在clickedList [0]中
2. 单击另一张卡并将其类名存储在clickedList中[1]
3. 如果匹配与否，则比较clickedList [0]和clickedList [1]

Answer 1

摆脱循环并使用index()索引元素

var clickedList={}

var $cards = $(".card").click(function() {
    var cardIndex = $cards.index(this)
    clickedList[cardIndex] = $(this).children().attr("class");
    console.log(clickedList)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="card">
  <i class="car">car</i>
</li>
<li class="card">
  <i class="cat">cat</i>
</li>
<li class="card">
  <i class="car">car</i>
</li>
<li class="card">
  <i class="cat">cat</i>
</li>