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

Question

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

0

Я работаю над парными играми с нуля, чтобы помочь мне изучить 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>

Сценарий должен обнаруживать, когда li с классом active также имеет соответствующий класс карты. Затем он удалит класс "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');
}

Спасибо заранее!

Jamie 06 янв. 2014, в 11:26

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Salman A · Accepted Answer · 2014-01-06T07-00-00.000Z

Предполагая, что вам необходимо:

проверьте, есть ли у двух элементов класс .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");
    }
}

Превосходно, работает удовольствие! Спасибо!