-1

在我想要交换位置的众多图像中，我有两个图像。如果我单击一个图像，然后单击另一个图像，则相应的图像应相互交换，其余图像应保持不变。我是这方面的初学者，所以任何帮助或指导都会有所帮助。

4

6 回答 6

2

这也适用于每个图像：

 <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="";
         }
      });
 });​
于 2012-08-08T10:14:09.140 回答
1

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

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');   
});
于 2012-08-08T10:41:03.790 回答
0

试试下面的代码

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;
        }
    });
}());​
于 2012-08-08T10:11:40.980 回答
0

请参阅以下示例：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类，因此您可以突出显示单击的图像...

于 2012-08-08T10:15:47.823 回答
0

这是一种不同的方法，它交换实际元素而不是 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 但不应该有所作为）

于 2012-08-08T10:23:41.983 回答
0

鉴于此 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 的第一个答案的改进版本和他/她的第二个答案的替代品发布。

于 2012-08-08T11:00:36.663 回答