點擊一個按鈕加載圖像

Question

我有一個<button>與rel="example.jpg"。我想要按鈕在我的#area DIV中加載圖像，僅在點擊它後才加載，而不是頁面加載。所以我用這個代碼，一切都完成了：

$(document).ready(function(){ 
$("button").click(function(){ 
    var imgUrl = $(this).attr('rel'); 
    $("#area").html("<img src='" + imgUrl + "' alt='description' />"); 
}); 
}); 

<button rel="example.jpg">Click Me</button> 
<div id="area"></div> 

Here是它的jsfiddle。

現在我發現rel不適用於<button>。

我有興趣知道其他解決方案做到這一點，例如使用jQuery .data()

Answer 1

HTML

<button data-rel="example.jpg">Click Me</button> 

的jQuery

$("button").click(function() { 
    var imgUrl = $(this).data('rel'); 
    $("#area").html("<img src='" + imgUrl + "' alt='description' />"); 
}); 

Answer 2

你的代碼改成這樣：

$(document).ready(function(){ 
$("button").click(function(){ 
    var imgUrl = $(this).data('rel'); 
    $("#area").html("<img src='" + imgUrl + "' alt='description' />"); 
    }); 
}); 

<button data-rel="example.jpg">Click Me</button> 
<div id="area"></div> 

小提琴：http://jsfiddle.net/x3QdU/4/

Answer 3

變化

<button rel= 

到

<button data-rel= 

http://jsfiddle.net/x3QdU/1/