javascript - 单击它们时相互更改 2 个图像

Question

我有一个包含多张图片的 div，我需要点击一张随机图片，然后再次点击一张随机图片，当我点击第二张图片以相互更改图片时。所有图像都可以互换。这是我到目前为止所做的:

编辑 fiddle : http://jsfiddle.net/w53Ls/5/

$("#image1").click(function(){
    imagePath = $("#image2").attr("src");
    if(imagePath == "http://s15.postimg.org/oznwrj0az/image.jpg"){
        $("#image3").attr("src", "http://s21.postimg.org/ojn1m2eev/image.jpg");
    }else{
        $("#image4").attr("src", "http://s23.postimg.org/epckxn8uz/image.jpg");        
    }
});

EDIT: 我尝试检查功能的代码在 EDIT FIDDLE 中，并在警告下检查图片的 src。现在我只需要设定一个条件在我按顺序更改所有部分并找到完整图片后提醒一些事情。有什么提示吗？

Answer 1

DEMO

var clickCount = 0;
var imgSrc;
var lastImgId;
$("img.element").click(function(){
    if (clickCount == 0)
    {
        imgSrc = $(this).attr("src");
        lastImgId = $(this).attr("id");
        clickCount++;
    }
    else {
        $("#"+lastImgId).attr("src",$(this).attr("src"));
        $(this).attr("src",imgSrc)
        clickCount = 0;
    }
});

---

已更新

当你完成拼图时，这会让你知道

DEMO

var clickCount = 0;
var imgSrc;
var lastImgId;

// Function for Comparing Arrays
// source: http://stackoverflow.com/questions/7837456/
Array.prototype.compare = function (array) {
    if (!array) return false;

    if (this.length != array.length) return false;

    for (var i = 0, l = this.length; i < l; i++) {
        if (this[i] instanceof Array && array[i] instanceof Array) {
            if (!this[i].compare(array[i])) return false;
        } else if (this[i] != array[i]) {
            return false;
        }
    }
    return true;
}

$(document).ready(function () {

    // Store the correct order first in an array.
    var correctOrder = $("#puzzle > img").map(function () {
        return $(this).attr("src");
    }).get();

    // Randomize your images
    var a = $("#puzzle > img").remove().toArray();
    for (var i = a.length - 1; i >= 1; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var bi = a[i];
        var bj = a[j];
        a[i] = bj;
        a[j] = bi;
    }
    $("#puzzle").append(a);

    $("img.element").click(function () {
        if (clickCount == 0) {
            imgSrc = $(this).attr("src");
            lastImgId = $(this).attr("id");
            clickCount++;
        } else {
            $("#" + lastImgId).attr("src", $(this).attr("src"));
            $(this).attr("src", imgSrc);
            clickCount = 0;

            // Get the current order of the images
            var currentOrder = $("#puzzle > img").map(function () {
                return $(this).attr("src");
            }).get();

            // Compare the current order with the correct order
            if (currentOrder.compare(correctOrder)) alert("Puzzle completed");
        }
    });
});