jqueryの親関数から属性値を取得する

Question

私はjqueryを初めて使用しています。

私は約10の小さなサムネイルスタイルの画像で構成された「ヘッダーバー」を持っています。これらの画像をクリックすると、より大きなバージョンを表示するために大きなサイドバー画像が変更されます。

いくつかについていじって、私はイメージのため、次のコード使用して管理するように見えた、

：私は、その後の下部にあるいくつかのjqueryのコードを追加し

<img src="header_images\small1.jpg" alt="alttext" class="hdrimage" id="1" data-bigimage="big1.jpg" /> 
<img src="header_images\thumb2.jpg" alt="alttext" class="hdrimage" id="2" data-bigimage="bigger2.jpg" /> 

などを...ページ：

$(".hdrimage").bind('click', function() { 
    $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage"));  
}) 

これが最善の方法であるかどうかはわかりませんが、うまくいくようです。

古いイメージをフェードアウトして新しいイメージをフェードインするのはいいと思ったので、.fadeOut（ "slow"）を追加しました。 clickイベントには適用されますが、テストではフェードが完了してからイメージがスワップされるまで待機しません。 Googleに おかげで、私はこれを達成するために.fadeOutにコールバック関数を使用する必要が発見されたので、私が何かしようとしたん：

$(".hdrimage").bind('click', function() { 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", "header_images/"+$(this).attr("data-bigimage")); 
    }) 
}) 

をしかし、これはもはや機能します。 $（これ）がクリックされた.hdrimageではなく#swappyimageを参照しているからです。私はサムネイル（.hdrimage）から必要な属性を参照する方法を理解することができません。そのサムネイルをクリックして全体をトリガーするので、助けていただければ幸いです。

私はそれを十分に説明したかったと思います！

Answer 1

http://api.jquery.com/event.target/を使用して、必要な場所にイベントオブジェクトを渡すことができます。

$(".hdrimage").bind('click', function(clickEvent) { 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", "header_images/"+$(clickEvent.target).attr("data-bigimage")); 
    }) 
}) 

Answer 2

だけで、あなたのコンテキストを保存

$(".hdrimage").bind('click', function() { 
    var self = this; 
    $("#swappyimage").fadeOut('slow', function() { 
    $("#swappyimage").attr("src", "header_images/"+$(self).attr("data-bigimage")); 
    }) 
}) 

Answer 3

は、単に前にフェードアウトコールに変数を定義します。

$(".hdrimage").bind('click', function() { 
    var newSrc = "header_images/"+$(this).attr("data-bigimage"); 
    $("#swappyimage").fadeOut('slow', function() { 
     $("#swappyimage").attr("src", newSrc); 
    }) 
}) 

また、私はあなただけのこの部分を残したが、想定しています