jQuery记忆游戏

我正在创建一个基于aditia rahman jQuery的记忆游戏。通过使用jQuery动态地将图像添加到具有唯一id的div标记中的matched，而不是手动添加，我在slight上更改了我的版本。有两个问题：

1.）当我点击一张卡时，它不会“打开”或翻转以显示自己以找到匹配的卡/图像

2.）在Firebug中测试时，我注意到卡/图像始终处于相同的位置，而不是随机放置。例如，div id=“1”包含image id=“01”，然后是div id=“2 containing image id=“02”，这将使游戏变得枯燥和太简单，而div id=1”containing image id=“01”应该有一个随机数，例如div id=“9”image id=“09”，以便在用户每次玩或重置游戏时使游戏更具挑战性

这是jQuery脚本，用于动态加载图像并为每个图像提供一个带有克隆的id

var boxopend     =     "",
    imgopend     =     "",
    count        =      0,
    found        =      0,
    children     =     $("boxcard").children(),
    child        =     $("boxcard div:first-child");

var divs = $('div');

divs.each(function(i){
    //goes through each div and add unique id attribute e.g card1 - card12
    $(this).attr("id", "card" + i);

    //creates images and gives unique src, and alt attribute and then appends
    //to corresponding div  
    var img = $("<img />");
    img.attr({
        //"id": i,
        "src": "img/" + i + ".png",
        "alt": "image" + i,
});
    $(this).append(img);
});

$(divs.clone()).each(function(i){
    var divNew = $('<div></div>').insertAfter($('div:last-child'));
    divNew.attr("id", "card" + i + "00");

var img = $("<img />");
    img.attr({
        //"id": i,
        "src": "img/" + i + ".png",
        "alt": "image" + i,
});
    divNew.append(img);
});

var-boxopend=“”，
imgopend=“”，
计数=0，
发现=0，
children=$（“boxcard”）.children（），
child=$（“boxcard分区：第一个孩子”）；
var divs=$（'div'）；
每个分区（功能（i）{
//检查每个div并添加唯一的id属性，例如card1-card12
$（此）.attr（“id”、“卡”+i）；
//创建图像并提供唯一的src和alt属性，然后附加
//到相应的div
var img=$（“'）。insertAfter（$（'div:last child'））；
divNew.attr（“id”、“卡”+i+“00”）；
变量img=$（“
这是教程脚本，我正在尝试使用上面的脚本

function randomFromTo(from, to){
        return Math.floor(Math.random() * (to - from + 1) + from);
    };

    function shuffle(){
        var array_img = new Array();
        for (i=0; i array_img[i] = $("#" +child.attr("id") + "img").attr("src");
        child = child.next();
    }

    for(z = 0; z randIndex = randomFromTo(0, array_img.length - 1);

    //set new image

    $("#"+child.attr("id")+"img").attr("src", array_img[randIndex]);
    array_img.splice(randIndex, 1);

    child = child.next();

    function openCard(){

        id = $(this).attr("id");

        if($("#"+id+"img").is(:"hidden")){
            $("#boxcard div").unbind("click", openCard);

            $("#"+id+"img").slideDown('fast');

            if(imgopened == ""){
                boxopened = id;
                imgopened = $("#"+id+"img").attr("src");
                setTimeout(function(){
                    $("#boxcard div").bind("click", openCard)
                }, 300);
            }else{
                currentopened = $("#"+id+"img").attr("src");
                if(imgopened != currentopened){
                    //close again
                    setTimeout(function(){
                        $("#"+id+"img").slideUp("fast");
                        $("#"+boxopened+"img").slideUp("fast");
                        boxopened = "";
                        imgopened = ""
                    }, 400);
                }else{
                    //found
                    $("#"+ id + "img").addClass("opacity");
                    $("#" + boxopened + "img").addClass("opacity");
                    found++;
                    boxopened = "";
                    imgopened = "";
                }

                setTimeout(function(){
                    $("#boxcard id").bind("click", openCard)
                }, 400);
            }

            count++;
            $("#count").html("" + count);

            if(found == 10){
                msg ='<span id="msg">Congrats ! You Found All Shoes With 
                </span>';

                $("span.link").prepend(msg);
            }
        }   
    }
})(); 

函数随机FromTo（from，to）{
返回Math.floor（Math.random（）*（to-from+1）+from）；
};
函数shuffle（）{
var array_img=新数组（）；
对于（i=0；i数组_img[i]=$（“#”+child.attr（“id”）+“img”）.attr（“src”）；
child=child.next（）；
}
对于（z=0；z randIndex=randomFromTo（0，数组长度-1）；
//树立新形象
$（“#”+child.attr（“id”）+“img”）.attr（“src”，array_img[randIndex]）；
阵列模拟拼接（randIndex，1）；
child=child.next（）；
函数openCard（）{
id=$（this.attr（“id”）；
如果（$（“#”+id+“img”）。是（：“隐藏”））{
$（“#boxcard div”）。解除绑定（“单击”，打开卡片）；
$（“#”+id+“img”）.slideDown（'fast'）；
如果（imgopened==“”）{
boxopened=id；
imgopened=$（“#”+id+“img”）.attr（“src”）；
setTimeout（函数（）{
$（“#boxcard div”）.bind（“单击”，打开卡片）
}, 300);
}否则{
currentopened=$（“#”+id+“img”）.attr（“src”）；
如果（imgopened！=当前打开）{
//再次关闭
setTimeout（函数（）{
$（“#”+id+“img”）.slideUp（“fast”）；
$（“#”+boxopened+“img”）.slideUp（“快速”）；
boxopened=“”；
imgopened=“”
}, 400);
}否则{
//发现
$（“#”+id+“img”）.addClass（“不透明度”）；
$（“#”+boxopened+“img”）.addClass（“不透明度”）；
发现++；
boxopened=“”；
imgopened=“”；
}
setTimeout（函数（）{
$（“#boxcard id”）.bind（“单击”，打开卡片）
}, 400);
}
计数++；
$（“#count”）.html（“+count”）；
如果（找到==10）{
祝贺你！你发现所有的鞋子都有
';
$（“span.link”）.prepend（msg）；
}
}   
}
})(); 

最后是HTML

<section id="boxbutton">

       <span class="link">
            <span id="count">0</span>
       </span>
      </section>
        <section id="boxcard">
            <div><!--<img src="img/0.png" alt="image0"/>--></div>
            <div><!--<img src="img/1.png" alt="image1"/>--></div> 
            <div><!--<img src="img/2.png" alt="image2"/>--></div> 
            <div><!--<img src="img/3.png" alt="image3"/>--></div> 
            <div><!--<img src="img/4.png" alt="image4"/>--></div> 
            <div><!--<img src="img/5.png" alt="image5"/>--></div> 
            <div><!--<img src="img/6.png" alt="image6"/>--></div> 
            <div><!--<img src="img/7.png" alt="image7"/>--></div> 
            <div><!--<img src="img/8.png" alt="image8"/>--></div> 
            <div><!--<img src="img/9.png" alt="image9"/>--></div> 
            <div><!--<img src="img/10.png" alt="image10"/>--></div>
            <div><!--<img src="img/11.png" alt="image11"/>--></div>
            <div><!--<img src="img/12.png" alt="image12"/>--></div> 
         </ul>
        </section>       


0

id选择器以数字开头不起作用，你可以在它们前面加上
img\u id
等词。这里的更多信息：我没有注意到
openCard（）
在任何地方都被调用。@martincarlin87我很抱歉我的id的名称惯例是以卡开头，然后加上一个数字（例如card09）。很抱歉让人困惑。@PatrickQ不是美元（“#boxcard div”）。解除绑定（“单击”，openCard）；它应该是美元（“#boxcard div”）。关闭（“单击”，openCard”）；调用openCard（）？教程原来有美元（“#boxcard div”）。解除绑定（openCard）；我更新了上面的代码。对吗？是的，教程已经有2-3年的历史了，所以我正在尝试更新代码。要像$（“#boxcard div”）。在（“单击”，function（）{openCard（）}）；替换教程的原始代码$（“#boxcard div”）。bind（openCard）？@PatrickQ