我正在使用 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”)
当找到一对卡片时，它们不会重置到原始位置或消失。
最佳答案
试试这个流程。
1.单击卡片时...将类别更改为“打开”。再次单击时，类将更改为默认的“隐藏”。
...每张卡片都有一个像 image_name+desc 这样的 ID ...因此 2 张卡片将具有相同的 ID。
2.每次点击后使用 jQuery each() 函数搜索“open”类并获取元素的 id。
3) 比较这两个id，如果相似则再次使用each() 函数删除元素。如果您不使用 each() 函数，您将只删除第一个元素。
ps: 别忘了数数，跟踪ids，score..etc.
...each() 函数实战 http://api.jquery.com/jQuery.each/
关于php - jQuery 不会删除内存游戏对，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18647500/