javascript - 点击两张图片时会互相改变

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 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");
        }
    });
});