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?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 27 '14 at 16:41

kei

20,157
2
35
62

This one is perfect! Thank you – user3459377 Mar 27 '14 at 16:42
Would this code work if i have 16 squares and a shuffle function on doc ready then user arrange all the pieces to get a feedback and deactivate the ability to swap images? – user3459377 Mar 27 '14 at 16:53
It should as long as the images have `id`s on them and are of class `element`. – kei Mar 27 '14 at 16:55
I'm gonna edit fiddle and post it to see my whole code. – user3459377 Mar 27 '14 at 16:58
theres a problem i saw now ... when im changing the pictures ids arent changed :-o – user3459377 Mar 28 '14 at 15:05
The `` themselves do not swap, but their `src` do. Do you actually want to swap the `/id` instead? – kei Mar 28 '14 at 15:44
Now i found a way to validate puzzle by src so i dont need to validate it by ids.I'm gonna post the code in Edit coz i need some help with check function if you're kind. – user3459377 Mar 28 '14 at 15:55
done,the correct order shall be a,b,c,d, ... (in alphabetical order) and i was thinking to make an array with correct answers and compare it with user answers but it will be too long as i have 16 images :( – user3459377 Mar 28 '14 at 16:01
Updated code so it alerts when the puzzle is complete. – kei Mar 28 '14 at 16:20
Great help again! Thanks alooot – user3459377 Mar 28 '14 at 20:54
i have encountered a problem...i tried to stop .click() event from firing when if (currentOrder.compare(correctOrder)) has been met using return false; in the condition or .unbind() but nothing works :( is there other solution? – user3459377 Mar 31 '14 at 08:49
Hello again,i would like to ask you if its possible to add a glowing class when user click on an element? this glowing class should dissapear when user click on another element. – user3459377 Apr 08 '14 at 10:13

score 2 · Answer 2 · answered Mar 27 '14 at 16:43

2

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

var counter = 0;

The code was improvised but works XD

you try improve it

answered Mar 27 '14 at 16:43

Jose Vega

27
8

Its ok,i couldnt use it coz someone answered first and i checked his answer and accepted it. Now i only need to give a feedback when all pieces where arranged and user discovered the entire image ( i must say that i have 16 squares) – user3459377 Mar 27 '14 at 16:51

score 1 · Answer 3 · answered Mar 27 '14 at 16:41

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

Its great.To bad i cant accept two answers :( but im gonna vot +1 when i get 15 rep points.Thanks for your time — user3459377, Mar 27 '14 at 16:44

Change 2 image each other when click on them

3 Answers3

Updated