不能顯示更新的圖像

Question

我有以下代碼：

JQuery的

$("document").ready(function(){ 
    var imglink; 
    imglink = 'url("http://poweruser.aeiou.pt/wp-content/uploads/2012/12/google.jpg")'; 
    $('#trick_img').css('content',imglink); 

    $(document).on("click","change",function(){ 
     imglink = 'url("http://poweruser.aeiou.pt/wp-content/uploads/2012/12/Google-Gmail.jpg")'; 
     $('#trick_img').css('content',imglink); 
    }); 

});​ 

HTML

<image id="trick_img" draggable="false"/><br/> 
<button id="change">Change image</button>​ 

的CSS

img#trick_img { margin:10px; } 

測試鏈接 http://jsfiddle.net/Y5jA9/

我的問題是：我將如何做才能改變屏幕上的圖像？

Answer 1

這條線：

$(document).on("click","change",function(){ 

應改爲：

$(document).on("click","#change",function(){ 

要通過ID引用 「更改圖片」 按鈕

Answer 2

$(document).on("click","#change",function(){ 
     imglink = 'http://poweruser.aeiou.pt/wp-content/uploads/2012/12/Google-Gmail.jpg'; 
     $('#trick_img').attr('src',imglink); 
    }); 

Answer 3

$(document).on("click","#change",function(){ 
     var imglink; 
     imglink = 'http://poweruser.aeiou.pt/wp-content/uploads/2012/12/Google-Gmail.jpg'; 
     $('#trick_img').attr('src',imglink); 
    }); 

試試這個

http://jsfiddle.net/Y5jA9/3/