单击它们时相互更改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 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");
        }
    });
});

Answer 2

http://jsfiddle.net/w53Ls/2/

var counter = 0;

代码是即兴的，但可以工作 XD

你尝试改进它

Answer 3

这是一个new version of your jsfiddle，我认为它可以满足您的需求。

它将相同的单击处理程序应用于每个具有类swapable 的对象。每次单击可交换元素时，处理程序都会检查之前是否先单击了另一个元素。如果是这样，它会交换它们。如果不是，它只记得这个元素是第一个。

var firstId = ''; // Initially, no element has been clicked first
var firstSrc = '';
// Apply the following function to every element with 'class="swapable"
$('.swapable').click(function(){
  if (firstId !== '') { // There is already a first element clicked
    // Remember the information of the currently clicked element
    var secondId = $(this).attr('id');
    var secondSrc = $(this).attr('src');
    // Replace the currently clicked element with the first one
    $('#' + secondId).attr('src', firstSrc);
    // Replace the first one with the current one
    $('#' + firstId).attr('src', secondSrc);
    // Forget the first one, so that the next click will produce a new first
    firstId = '';
    firstSrc = '';
  }
  else // This is the first element clicked (this sequence)
  {
    // Remember this information for when a second is clicked
    firstId = $(this).attr('id');
    firstSrc = $(this).attr('src');
  }
});