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>

如果用户已成功识别匹配的li，则会点击它们以使它们“活跃”，如此;

<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何时共享匹配的卡类。然后，这将删除“活动”类并添加类“匹配”以标识它们已成功匹配。

我一直在想这个;

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");
    }
}

使用jQuery / JavaScript动态检测匹配的类名

1 个答案: