更新

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 of pictures.Now我只需要创建一个条件在我按顺序更改所有部分并找到整个图片后发出警告。任何提示？

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

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

3 个答案:

更新