jQuery 不会删除记忆游戏的配对答案

【问题标题】：jQuery won't remove pair for Memory GamejQuery 不会删除记忆游戏的配对
【发布时间】：2013-09-05 23:25:52
【问题描述】：

我正在使用 jQuery 和 PHP 创建一个记忆游戏（关闭一个找到 here 的脚本），基本上我要做的是让它在匹配两张卡时，它们都被删除.但是，我正在使用两个不同的图像进行配对。在 HTML 表单中，每张卡片如下所示：

<div class="card {toggle:'imagename'}">                 
<div class="off"></div>                 
<div class="on {toggle:'imageid'}"></div>
</div>

本质上，选择两张卡时，假设jQuery应该检查ID的匹配。最初它是假设检查图像是否匹配，但是作为两个不同的图像我不能这样做（它只会显示一个）。下面是 jQuery：

function matchingCards(event, params){
    $cards = $("."+params.css_class+".on:visible");
    $.each($cards, function(index, card){
        var $card = $(card);
        $card.trigger("card_removed");
        $card.parent(".card").unbind("*").before("<div class='card_ph'></div>").remove();
        $card = null;
});

$cards_left = $("#game_board>.card");
if ( $cards_left.length == 0 ){
    $(document).trigger("game_won", {});
    /* 
     * quickFlip has a problem when working in IE: when the last 
     * element bound was removed the problem is caused by the bound 
     * resize event on the window and is causing 
     * the end game get stuck when the game is over...
     */
    $(window).unbind("resize");
}
$cards_left = $cards = null;
};

function checkCards(){
$on_cards = $("#game_board .card>.on:visible");
if ( $on_cards.length == 2 ){
    $(document).trigger("player_made_move");
    // Get the first object css class
    var css_class = $on_cards.parent(".card").metadata()["toggle"];
    var $card = $(this);
    var this_card = $card.children(".on").metadata()["toggle"];
    $matched_cards = $on_cards.filter("."+this_card);
    var event_name = "no_match";
    if ( $matched_cards.length == 2 ){
        event_name = "found_match";
    }
    if ( css_class == css_class ){
        event_name = "no_match";
    }
    $(document).trigger(event_name, {css_class: css_class});
    $matched_cards = null;
}
clearTimeout(chk_cards_timeout);
chk_cards_timeout = null;
$on_cards = null;
};

任何帮助将不胜感激。

附加信息：

这些对具有相同的图像名称，我刚刚将“_desc”添加到其中一个作为 CSS 类名称（即，一个图像标题为“i1”，另一个图像标题为“i1_desc”）

当找到一对卡片时，它们不会重置到原始位置或消失。

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

试试这个流程。

1.点击卡片时...用“打开”更改类别。再次单击时，该类将更改为默认的“隐藏”。

...每张卡都有一个像 image_name+desc 这样的 id ...所以 2 张卡将具有相同的 id。

2.每次点击后使用jQuery each() 函数搜索“open”类并获取元素的id。

3) 比较这两个 id，如果相似，再次使用 each() 函数删除元素。如果你没有使用 each() 函数，你只会删除第一个元素。

ps：不要忘记计数，跟踪 ids，score..等。

...each() 函数在行动http://api.jquery.com/jQuery.each/

【讨论】：