javascript - 单击按钮后加载图像

Question

我有一个<button>与rel="example.jpg". 我希望按钮在我的#areaDIV 中加载图像，就在单击它之后，而不是在页面加载时。所以我使用这段代码，一切都完成了：

$(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>

这是它的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

change

<button rel=

to

<button data-rel=

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

Answer 3

将您的代码更改为：

$(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/