Wie pusht man bestimmte Klassen einzeln in ein Array?

Question

<div class="divColorContainer"> 
    <div class="Blue"></div> 
    <div class="Green"></div> 
    <div class="Blue"></div> 
</div> 

Ich habe eine Schaltfläche, wenn ich geklickt habe, möchte ich dieses Attribut in ein Array schieben, um später für eine Score-Funktion zu vergleichen.

Ich versuchte element.push($(.divColorContainer).attr(.Blue) und viele andere holen.

Wie wähle/drücke ich die erste Blue-Klasse, wenn die Schaltfläche einmal angeklickt wird, und dann, wenn erneut geklickt wird, die nächste Blue-Klasse?

Wenn Sie warum wandern. Es ist für ein Memory-Spiel.

Answer 1

Über Selektor Sie $('.divColorContainer .Blue:eq('+Index+')') bestimmen, um das Element durch seinen Index :eq() oder nth-child() oder mit Jquery .eq()

Und ich weiß nicht, welche attribute Sie sprechen .. Aber man kann so etwas wie diese verwenden können

$(document).ready(function(){ 
 
    var Index = 0; 
 
    $('.selectBlue').on('click',function(){ 
 
    // you can here make whatever you want 
 
    // for example addClass(); 
 
    $('.divColorContainer .Blue:eq('+Index+')').addClass('bg'); 
 
    Index++; 
 
    }); 
 
});

.bg{ 
 
    background : blue; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="divColorContainer"> 
 
    <div class="Blue">Blue</div> 
 
    <div class="Green">Green</div> 
 
    <div class="Blue">Blue</div> 
 
</div> 
 
<button type="button" class="selectBlue">Select Blue Class</button>

Answer 2

CSS-Klasse zu manipulieren AttributverwendenjQuery-Methoden. Wenn Sie andere Attribute manipulieren möchten, verwenden Sie die Methoden attr() und prop().
Verwenden Sie die lokale Variable und die If... Else If-Anweisung, um die Anzahl der Klicks zu berücksichtigen.

Answer 3

Dies ist meine erste Stack-Überlauf Antwort, und ich bin mir nicht ganz klar, was Sie zu tun versuchen, aber ich hoffe, dass ich helfen kann.

Wenn es sich um ein Gedächtnisspiel handelt, möchten Sie wahrscheinlich wissen, auf welches Element geklickt wurde, nicht nur auf den Klassennamen, da sie wiederverwendet werden.

, unabhängig zu einem Array mit den Klassennamen geklickt Elemente zu speichern, können Sie vielleicht so etwas wie verwenden:

var classArray = []; 
$('.divColorContainer').children('div').each(function(){ 
    classArray.push($(this).attr('class')); // To save the class names 
}): 

der Index jedes Element zu erhalten geklickt Sie eine wiederholte Klasse zu jedem Element hinzufügen könnte .

Beispiel:

<div class="color Blue">Blue</div> 

oder Ziel sie nur mit:

$('divColorContainer').children('div').on('click', function({})); 

und legen Sie dann ein Click-Ereignis dieser Klasse den Index des klickten Element zu erhalten (0 basierten Index innerhalb seines Elternteil). Man könnte so etwas wie folgt verwenden:

var colorArray = []; 
$('.color').on('click', function(){ 
    colorArray.push($(this).index()); 
});