比较图像src jquery

我正在做一个游戏，其中有12张牌颠倒过来。当你点击一张卡片时，它会翻转一张图片，每张图片有2张，因此12张卡片上总共有6张图片。关键是要匹配这些图像。我在比较img src是否与翻转的图像相同时遇到了问题。到目前为止，我所看到的是：

---

脚本应如下所示：

var lastSelected;
$(document).ready(function(){
    addImg();
    start();
    click();
});

function check(el){
    if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            // do sth. with $(this)
            alert("gotcha!");
    }
    lastSelected = $(el).find("img");
}

function start(){
    $("div.row div img").addClass("hidden");
};

function click(){
    $("div.row div").each(function(){
        $(this).click(function(){
         if($("img", this).hasClass("hidden")){
            $("img",this).removeClass("hidden");
            $("img",this).addClass("visible");
             check($(this));

         }else if($("img",this).hasClass("visible")){
            $("img",this).removeClass("visible");
            $("img",this).addClass("hidden");
         }

        });

    });

};

function addImg (){

    var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];

var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.floor(Math.random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
    else imagesused.push(images[rand]);
    console.log(images);

});
}

function check(){
    $('img.visible:not(.correct):eq(0)').attr('src') == $('img.visible:not(.correct):eq(1)').attr('src'))){
        $('img.visible:not(.correct)').addClass('correct')
    }
}

var选择；
$（文档）.ready（函数（）{
addImg（）；
start（）；
单击（）；
});
功能检查（el）{
if（$（lastSelected）.attr（“src”）==$（el.find（“img”）.attr（“src”）和&$（lastSelected.hasClass（“可见”））{
//用美元做某事（这个）
警惕（“抓住了！”）；
}
lastSelected=$（el.find（“img”）；
}
函数start（）{
$（“div.row div img”）.addClass（“隐藏”）；
};
函数单击（）{
$（“div.row div”）。每个（函数（）{
$（此）。单击（函数（）{
if（$（“img”，this）.hasClass（“隐藏”））{
$（“img”，this.removeClass（“隐藏”）；
$（“img”，this）.addClass（“可见”）；
勾选（$（此））；
}else if（$（“img”，this）.hasClass（“可见”））{
$（“img”，this.removeClass（“可见”）；
$（“img”，this）.addClass（“隐藏”）；
}
});
});
};
函数addImg（）{
变量图像=[”http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];
var imagesused=[]；
$（'.container div:not（.row）'）。每个（函数（）{
var rand=Math.floor（Math.random（）*images.length）；
$（此）。附加（“”）；
if（imagesused.indexOf（images[rand]）！=-1）images.splice（rand，1）；
else imagesused.push（images[rand]）；
控制台日志（图像）；
});
}

您应该这样做：

var lastSelected;
$(document).ready(function(){
    addImg();
    start();
    click();
});

function check(el){
    if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            // do sth. with $(this)
            alert("gotcha!");
    }
    lastSelected = $(el).find("img");
}

function start(){
    $("div.row div img").addClass("hidden");
};

function click(){
    $("div.row div").each(function(){
        $(this).click(function(){
         if($("img", this).hasClass("hidden")){
            $("img",this).removeClass("hidden");
            $("img",this).addClass("visible");
             check($(this));

         }else if($("img",this).hasClass("visible")){
            $("img",this).removeClass("visible");
            $("img",this).addClass("hidden");
         }

        });

    });

};

function addImg (){

    var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"];

var imagesused = [];
$('.container div:not(.row)').each(function() {
    var rand = Math.floor(Math.random() * images.length);
    $(this).append('<img src="' + images[rand] + '"/>');
    if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
    else imagesused.push(images[rand]);
    console.log(images);

});
}

function check(){
    $('img.visible:not(.correct):eq(0)').attr('src') == $('img.visible:not(.correct):eq(1)').attr('src'))){
        $('img.visible:not(.correct)').addClass('correct')
    }
}

---

因此，如果翻到的卡片都是相同的，那么您可以向它们添加一个

类
，这样下次就不会再检查它们。这样，您只需检查刚才翻到的两张卡片。
由于您现在有了代码，需要进行一些重构。但要回答您当前的问题，很简单：

var last;
function click(){
    $("div.row div").each(function(){
         // ..snip..

             // added code
             console.log(last == $("img",this).attr("src"));
             last = $("img",this).attr("src");

我不想深入讨论更多细节的原因是，我假设您一次只希望有两张卡片面朝上，因此没有理由循环查看所有可见的卡片。
我正在O'reilly在线学校学习相同的jQuery课程

答案如下：

要使用的jquery代码

 var lastSelected;
    var score = 0;
    var boxopened = "";
    var imgopened = "";
    var num = 0;
    var moves = 0;
    $(function () {
        $("div.row div img").addClass('hidden');
        addImg();
        click();
        check();
        shuffle();


    });

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

    function shuffle() {
        var children = $("#boxcard").children();
        var child = $("#boxcard div:first-child");

        var array_img = new Array();

        for (i = 0; i < children.length; i++) {
            array_img[i] = $("#" + child.attr("id") + " img").attr("src");
            child = child.next();
        }

        var child = $("#boxcard div:first-child");

        for (z = 0; z < children.length; 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 check(el) {

        if ($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) {
            score = 0 + 2;
            alert("Congradulation! You scored!!" + " " + score + " Points");
        }

        lastSelected = $(el).find("img");
        clearAll();

    }


    function click() {

        var boxes = $(".row img").size();
        $(".row div").click(function () {
            moves++;
            $(".totalmoves").html(moves);
            $(".cover").css({
                "z-index": "9999"
            });
            $(this).children("img").animate({
                "opacity": "1"
            }, function () {
                num++;
                var id1 = $("img.selected").attr("src");
                var id2 = $(this).attr("src");
                $(this).addClass("selected");

                if (num == 2) {
                    num = 0;
                    if (id1 == id2) {
                        $(".selected").removeClass("selected");
                        score = score + 2;
                        alert("Congradulation! You scored!!" + " " + score + " Points");
                        boxes = boxes - 2;
                        if (boxes == 0) {
                            alert("Game Over Your Total Score is :" + score + " Points");
                        }

                        $(".yourscore").html(score);
                    } else {
                        speed = 100;
                        $(".selected").animate({
                            "opacity": "0"
                        }, 400, function () {
                            $(".selected").removeClass("selected");
                            if (score > 1) {
                                score = score - 0.5;
                                $(".yourscore").html(score);
                            }
                        });
                    }
                } else {
                    speed = 100;
                }

                $(this).animate({
                    "padding": "0.1"
                }, speed, function () {
                    $(".cover").css({
                        "z-index": "-9999"
                    });
                });
            });

        });


    };

    // add Random Images
    function addImg() {

        var images = ["http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/cheese.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/eggs.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_blender.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/tea.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_collander.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_teapot.gif"];

        var imagesused = [];
        $('.container div:not(.row)').each(function () {
            var rand = Math.floor(Math.random() * images.length);
            $(this).append('<img src="' + images[rand] + '"/>');
            if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1);
            else imagesused.push(images[rand]);
            console.log(images);

        });
    }
    // Clear the images Button
    var clearAll = function () {
        $(':button').click(function () {
            score = 0;
            $(".yourscore").html(score);
            moves = 0;
            $(".totalmoves").html(moves);
            $(".selected").removeClass("selected");
            $(".row img").animate({
                "opacity": "0"
            }, function () {
                $(".row img").remove();
                addImg();

            });




        });

    };

var选择；
var得分=0；
var=”；
var imgopened=“”；
var num=0；
var=0；
$（函数（）{
$（“div.row div img”）.addClass（“隐藏”）；
addImg（）；
单击（）；
检查（）；
洗牌（）；
});
函数随机FromTo（from，to）{
返回Math.floor（Math.random（）*（to-from+1）+from）；
}
函数shuffle（）{
var children=$（“#boxcard”）.children（）；
var child=$（“#boxcard div:第一个孩子”）；
var array_img=新数组（）；
对于（i=0；i1）{
得分=得分-0.5；
$（“.yourscore”）.html（分数）；
}
});
}
}否则{
速度=100；
}
$（此）。设置动画({
“填充”：“0.1”
}，速度，功能（）{
$（“.cover”）.css({
“z索引”：“-9999”
});