java-scriptとjqueryを使用してリスト内の繰り返しクリックされたタグのクラス名を保存する方法は？

Question

私はhtml、css、javascriptを使ってメモリゲームを作成しています。これにより、ユーザーはカードのセットを互いに照合するよう求められます。私は現在、カードの種類を表すカードのクラス名を抽出することに固執しています。ユーザーは、カードの種類をクリックしてリストに格納します。ユーザーがカードをクリックしたときに1つのクラス名しか格納できませんでしたが、次のカードとクラス名をリストに入れようとしたときに失敗しました。 forループとwhileループの両方を使ってみました。ここに私のコードは次のとおりです。カードの

HTML部分：

JavaScriptの一部

<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> 

：

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

は、ループを排除してインデックスにを使用して取得していない要素を比較

loop`のために `内側をクリックし、なぜ

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>