javascript - jQuery を使用して (2 回の連続クリックで) Web ページ内の 2 つの画像を交換するにはどうすればよいですか?

Question

多くの画像の中で、場所を交換したい画像が 2 つあります。ある画像をクリックしてから別の画像をクリックすると、それぞれの画像が互いに入れ替わり、残りは同じままになります。私はこれの初心者なので、助けや指示があれば助かります。

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を考えると：

<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を使用してクリックした画像のスタイルを設定できます。このクラスは、以前にクリックした画像を識別するためにも使用できますが、DOMルックアップよりも高速であるため、代わりにJavaScript変数を使用しました。

JSFiddleにデモがあります：jsfiddle.net/cvthL/2

この回答は、 Jitendra Pancholiの最初の回答の改良版であり、 2番目の回答の代替として投稿されました。

Answer 4

これは、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/ (img の代わりに div を使用しますが、違いはありません)