2011-01-28 87 views
4

什麼是最簡單的方法來更改圖像src,當我點擊一個href與jQuery?
img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
< a href="#" id="1">
< a href="#" id="2">
< a href="#" id="3">
1.png,2.png,3.pngJavaScript更改圖像,href onclick =尋找最簡單的方法

href是用#OK或將是更好地在這裏placce一些JS?

回答

4

你應該.bind()help你的錨一個.click()help事件偵聽器。在這種監聽器,你通過調用.attr()help

$('a').click(function(event) { 
    $('#my_image').attr('src', function(i, src) { 
     return event.target.id + '.png'; 
    }); 
    return false; 
}); 
+0

$( '#my_image')ATTR( 'src' 中,event.target.id + 'png格式')似乎更容易。 – 2011-01-28 12:10:40

+1

謝謝,工作。但是,如果我在該頁面上有其他hrefs(不用於圖像更改)?在這種情況下,其他href也會改變圖像,但這並不好。 – Adrian 2011-01-28 12:12:51

3
<img id="my_image" class="icon" src="1.png" alt="1.png" border="0" /> 
<a onclick="changeImage(this)" href="#" id="1">1</a> 
<a onclick="changeImage(this)" href="#" id="2">2</a> 
<a onclick="changeImage(this)" href="#" id="3">3</a> 

<script> 
function changeImage(thisDiv){ 
    document.getElementById('my_image').src = thisDiv.id+".png" 
} 
</script> 

編輯改變SRC屬性:沒看到jQuery的要求!

2

這應該工作:

<a href="javascript:$('#my_image').attr('src', '2.png');" id="1"> 
2
$('a').click(function(e) { 
    var id = this.id; 
    $('#my_image').attr('src', id + '.png'); 
    e.preventDefault(); 
});