Обнаружение динамических сопоставлений имен классов с помощью jQuery/JavaScript

Question

Я работаю над спариванием игры с нуля, чтобы помочь мне изучить JavaScript и jQuery. За каждое препятствие я исследую, пока не найду ответ, но, похоже, я попал в блокпост! Запланируйте заранее, если это дублирующий вопрос, но я не смог найти ничего, что сработает.

Вот упрощенная версия моей проблемы:

список генерируется динамически с парами классов, готовых для согласования;

<ul> 
<li class="flip card1"></li> 
<li class="flip card1"></li> 
<li class="flip card2"></li> 
<li class="flip card2"></li> 
<li class="flip card3"></li> 
<li class="flip card3"></li> 
</ul> 

Если пользователь успешно идентифицировал совпадающие лики, они нажимают на них так, чтобы они были активны;

<ul> 
<li class="flip card1"></li> 
<li class="flip card1"></li> 
<li class="flip card2 active"></li> 
<li class="flip card2 active"></li> 
<li class="flip card3"></li> 
<li class="flip card3"></li> 
</ul> 

Сценарий должен обнаруживать, что лики с классом активных также имеют соответствующий класс карты. Затем он удалит класс «active» и добавит «соответствие» класса, чтобы определить, что они успешно сопоставлены.

Я так думал;

var numActive = $('.active').attr('class'); 
var numPairs = $(numActive).length; 

if (numPairs == 2) { 
$('.active').addClass('matching').remove class('active'); 
} 

Я также подумал о чем-то с этой целью;

<ul> 
<li class="flip card0"></li> 
<li class="flip card0"></li> 
<li class="flip card00 active"></li> 
<li class="flip card00 active"></li> 
<li class="flip card000"></li> 
<li class="flip card000"></li> 
</ul> 

var matched = $('.active').attr('class').length(); 
if(matched occurs twice with class of active){ 
$('.active').addClass('matching').remove class('active'); 
} 

Большое спасибо!

Answer 1

Предполагая, что вам нужно:

• проверить, если два элемента имеют классу .active
• и имеют тот же класс (за исключением flip и active)

if ($(".active").length === 2) { 
    var class1 = (" " + $(".active:eq(0)").attr("class") + " ") 
     .replace(" flip ", "") 
     .replace(" active ", "") 
     .replace(/^ +| +$/g, ""); 
    var class2 = (" " + $(".active:eq(1)").attr("class") + " ") 
     .replace(" flip ", "") 
     .replace(" active ", "") 
     .replace(/^ +| +$/g, ""); 
    if (class1 === class2) { 
     $(".active").toggleClass("active matching"); 
    } 
}