Wie speichern Sie den Klassennamen für wiederholt angeklickte Tags in einer Liste mit Java-Script und Jquery?

Question

Ich erstelle ein Memory-Spiel mit HTML, CSS und Javascript, wobei ein Benutzer aufgefordert wird, einen Satz von Karten miteinander zu vergleichen. Ich bin gerade dabei, die Klassennamen der Karten zu extrahieren, die den Kartentyp darstellen, wenn der Benutzer darauf klickt und sie in einer Liste speichert. Ich habe es geschafft, nur einen Klassennamen zu speichern, wenn der Benutzer auf eine Karte klickt, aber als ich es für die nächste Karte ausprobierte und den Klassennamen in einer Liste speicherte, scheiterte ich. Ich habe versucht, beide für und While-Schleifen. hier ist mein Code:

HTML-Teil für Karten:

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

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

Bitte beachten Sie, dass ich clickedList als globales Array.

Was ich wirklich will, wie unten tun:

1. Klick eine Karte und speichern ihre Klassennamen in clickedList [0]
2. eine andere Karte klicken und speichern ihre Klassennamen in clickedList [1]
3. vergleichen clickedList [0] und clickedList [1], wenn sie übereinstimmen oder nicht

Answer 1

Lassen sie sich die Elemente der Schleife und verwenden indizieren befreien

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>