イメージソースonClickを変更するには？

Question

さてさて、私は、画像が含まれているdiv要素を持っている、

<div id="image"> 
<img src="images/medium/1.png" /> 
</div> 

は今、私はjQueryを使ってリンクをクリックしたときの画像/メディア/ 2.pngにSRCを変更したいです。

私は検索しましたが見つかりませんでしたので、ここで質問しています。 私はjQueryの初心者ですので、とてもうまく説明していただければ幸いです。

Answer 1

$("#image img").attr("src", "images/medium/2.png")このトリックを行う必要があります。要素内でid "image"という要素内のimg要素を選択し、src属性を変更します。

あなたがそうのようなあなたのリンクのclickイベントハンドラでこれを実行できます。

$("#linkId").click(function() { 
    $("#image img").attr("src", "images/medium/2.png"); 
}); 

Answer 2

$("LINK SELECTOR GOES HERE").click(function(){ 
    $("#image img").attr("src","images/medium/2.png"); 
}); 

しかし、あなたが本当に一度だけこれを実行する場合、あなたは

http://api.jquery.com/one/を使用する場合があります

Answer 3

$('#image').click(function(){ // Or whatever element you want to click on 
    $('img', '#image').attr('src', 'images/medium/2.png'); // Change the src 
}); 

Answer 4

$('a.imageChanger').click(function() 
{ 
    $('#image img').attr('src','newImage.png'); 
} 

これはおそらくトリックですが、テクスチャを再度ロードする必要があるため、これを行うのがよいかどうかはわかりません。ほとんどの場合、あなたのdivに既に入っている2つのイメージを切り替えます。 clickメソッドではvisibleを1に、hiddenを1に設定します。

例

<a href="somelink" class="imageChanger">Click here</a> 

<div id="image"> 
    <img class="currentImage"> 
    <img class="hiddenImage"> 
</div> 

のjavascript：

// toggle both classes that display or hide an image. 
$('a.imageChanger').click(function() 
{ 
    $('#image img')each(function() 
    { 
     $(this).toggleClass('currentImage'); 
     $(this).toggleClass('hiddenImage'); 
    }); 
}); 

このスクリプトは、3つ以上有する2枚の画像ではなく、動作します。しかし、すでに利用可能な回転子プラグインがたくさんあります。
とCSS：

.hiddenImage 
{ 
    display:none; 
} 

.currentImage 
{ 

} 

私はこのコードをテストしていないが、それはこのようなもののようになります。単なるコンセプトです。