如何更改圖片來源onClick？

Question

好吧，我有一個包含圖像的DIV，

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

現在我想的改變src到圖像/中/ 2.png當我點擊使用jQuery的鏈接。

我已經搜索，但無法找到它，這就是爲什麼我問這裏。 我是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中已經存在的兩個圖像之間切換。將一個設置爲可見，另一個設置爲隱藏在點擊方法上。

例

<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'); 
    }); 
}); 

此腳本僅適用於2個圖像，而不是與3個或更多。但有很多旋轉插件已經可用。
而CSS：

.hiddenImage 
{ 
    display:none; 
} 

.currentImage 
{ 

} 

我沒有測試此代碼，但它看起來像這樣的事情。這只是一個概念。