Change 2 image each other when click on them

Question

i have a div with multiple images inside and i need to click on a random image then again click on a random picture and when i clicked the second image to change images with each other. All images are interchangeable.Heres what i've done so far:

EDIT 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: The code i have tryed for check function is in EDIT FIDDLE and with the alert i check src of pictures.Now i simply need to make a condition to alert something after i change all the pieces in order and found the whole picture.Any hint?

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

---

Updated

This let's you know when you're done with the puzzle

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;

The code was improvised but works XD

you try improve it

Answer 3

Here is a new version of your jsfiddle that I think will do what you want.

It applies the same click handler to every object with the class swapable. Each time a swapable element is clicked, the handler checks whether another element was previously clicked first. If so, it swaps them. If not, it just remembers that this element is the first one.

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