Question

我想在两者之间交换两个图像。如果我单击一个图像，然后另一个图像，相应的图像应相互交换，其余图像应保持不变。我是初学者，所以任何帮助或指导都会有所帮助。

Answer 1

这也适用于每张图片：

 <img src="http://stunningwebsitetemplates.files.wordpress.com/2011/12/jquery.png"/>
 <img src="http://bloggerschmidt.de/images/stories/logo-mootools.gif" />
 <img src="http://stunningwebsitetemplates.files.wordpress.com/2011/12/jquery.png"/>
 <img src="http://bloggerschmidt.de/images/stories/logo-mootools.gif" />

JS

 $(function(){
     var src="";
     var old;
     $("img").click(function(){
         if(src=="")
         {
            src=$(this).attr("src"); 
             old=$(this);
         }
         else
         {
             old.attr("src",$(this).attr("src"));
             $(this).attr("src",src);
             src="";
         }
      });
 });

Answer 2

没有任何全局变量的另一种解决方案。

HTML

<div id="images">
  <img scr="/images/1.jpg" />&nbsp;
  <img scr="/images/2.jpg" />&nbsp;
  <img scr="/images/3.jpg" />&nbsp;
  <img scr="/images/4.jpg" />&nbsp;
  <img scr="/images/5.jpg" />&nbsp;
</div>

Js文件

$('img').click(function(){
    if($('#images img').hasClass('selected')){
        var src = $(this).attr('src');
        $('.selected').attr('src',src);
        $(this).attr('src',$('.selected').attr('src'));
        $(this).removeClass('selected');
    }
    else
        $(this).addClass('selected');   
});

Answer 3

尝试以下代码

HTML

<div>
  <img scr="/images/1.jpg" />&nbsp;
  <img scr="/images/2.jpg" />&nbsp;
  <img scr="/images/3.jpg" />&nbsp;
  <img scr="/images/4.jpg" />&nbsp;
  <img scr="/images/5.jpg" />&nbsp;
</div>

Js文件

(function() {
    var swapArray = [];
    var count=0;
    $('img').click(function(){
        count++;
        swapArray.push($(this).attr('src'));
        $(this).addClass(count);
        if(count==2){
            $('.1').attr('src',swapArray[1]).removeClass('1');
            $('.2').attr('src',swapArray[0]).removeClass('2');
            swapArray.length = 0;
            count=0;
        }
    });
}());

Answer 4

请参阅以下示例：http://jsfiddle.net/Lvp4j/1/

var selected;
$("img").click(
    function() { 
        if (!selected)
        {
            selected = this; 
            $(selected).addClass("selected");
        }
        else
        {
            var src1 = $(selected).attr("src");
            var src2 = $(this).attr("src");
            $(this).attr("src", src1);
            $(selected).attr("src", src2);
            $(selected).removeClass("selected");
            selected = null;
        }
    }
);

我的代码还添加了selected类，因此您可以突出显示点击的图片...

Answer 5

这是一种交换实际元素而不是img的src的不同方法，也避免了使用外部变量进行交换。

$('img.swap').on('click', function() {
    var t = $(this);
    if (t.hasClass('clicked')) {
        t.removeClass('clicked');
        return;
    }

    var clicked = $('img.swap.clicked')
    if (clicked.length === 0) {
        t.addClass('clicked');        
        return;
    }
    var placeHolder = $('<div id="placeholder"></div>');
    clicked.before(placeHolder);
    t.after(clicked);
    placeHolder.before(t).remove();
    clicked.removeClass('clicked');
});

示例 - http://jsfiddle.net/BxST9/3/（使用div代替img但不应该有所作为）

Answer 6

鉴于此HTML：

<img src="image_1.jpg" />
<img src="image_2.jpg" />
<img src="image_3.jpg" />
<img src="image_4.jpg" />

您可以使用以下JavaScript：

(function() {
    var previous = null;

    $('img').click(function() {
        var current = $(this);
        if (current.is(previous)) {    // clicked same image twice; reset
            reset_clicked();
        } else if (previous != null) { // two images clicked; swap
            swap_src(previous, current);
            reset_clicked();
        } else {
            set_clicked(current);
        }
    });

    function reset_clicked() {
        previous.removeClass('clicked');
        previous = null;
    }

    function set_clicked(img) {
        img.addClass('clicked');
        previous = img;
    }

    function swap_src(img1, img2) {
        var src1 = img1.attr('src');
        img1.attr('src', img2.attr('src'));
        img2.attr('src', src1);
    }
}());

纯粹添加了'clicked'类，因此您可以使用CSS来设置点击图像的样式。这个类也可以用来识别任何以前点击过的图像，但我使用的是JavaScript变量，因为它比DOM查找更快。

JSFiddle上有一个演示：jsfiddle.net/cvthL/2

此答案已作为Jitendra Pancholi's first answer的改进版本发布，是他/她second answer的替代方案。

如何使用jQuery在网页中（连续两次点击）交换两个图像？

6 个答案: