특정 클래스를 개별적으로 배열에 푸시하는 방법은 무엇입니까?

Question

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

나는 단추가있을 때 그 속성을 배열로 밀어 나중에 점수 기능을 비교하려고합니다.

나는 element.push($(.divColorContainer).attr(.Blue)과 많은 다른 가져 오기를 시도했다.

버튼을 한 번 클릭하면 첫 번째 Blue 클래스를 선택/푸시하고 다시 클릭하면 다음 Blue 클래스를 가져 오는 방법은 무엇입니까?

방황하는 이유. 그것의 메모리 게임.

Answer 1

는 :eq() 또는 nth-child()를 사용하거나 JQuery와 .eq()

를 사용하여 인덱스로 요소를 결정하기 위해 $('.divColorContainer .Blue:eq('+Index+')')을 사용할 수 있습니다 그리고 난 당신이 얘기하는 attribute 모른다 ..하지만이 같은 것을 사용할 수있는 선택에 대해

CSS 클래스를 조작하려면

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

은를 사용하여 속성jQuery 메소드. 다른 속성을 조작하려면 attr() 및 prop() 메소드를 사용하십시오.
로컬 변수와 If... Else If 문을 사용하여 클릭 수를 고려하십시오.

Answer 3

이것은 내 첫 번째 스택 오버플로 응답이며, 당신이하려는 일에 대해 완전히 명확하지 않지만 도움을 주길 바랍니다.

메모리 게임 인 경우 재사용되므로 클래스 이름뿐만 아니라 클릭 한 요소를 추적하는 것이 좋습니다. 각 요소에 반복 클래스를 추가 할 수 있습니다, 각 항목의 인덱스를 클릭 얻으려면

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

:

에 관계없이, 배열로 클릭 요소의 클래스 이름을 저장하려면, 당신은 아마 같은 것을 사용할 수 있습니다 .

예 :

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

하거나 그들을 대상 :

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

그리고 내에서 클릭 된 요소의 인덱스 (0 인덱스를 얻기 위해 그 클래스에 클릭 이벤트를 설정된 학부모). 다음과 같이 사용할 수 있습니다.

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