单击按钮后加载图像 [英] load an image after clicking a button

问题描述

我有< button> ， rel =example.jpg。我希望按钮能够在 #area DIV中加载图像，只需 点击后，而不是页面加载。所以我使用这个代码，一切都完成了：

I have a <button> with the rel="example.jpg". I want the button to load the image in my #area DIV, just after clicking on it, not with the page load. So I use this code and everything is done:

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

Here is its jsfiddle.

现在我发现 rel 无效< button> 。

我很想知道其他解决方案，比如使用jquery .data（）

I'm interested to know other solutions to do this, such as using jquery .data()

推荐答案

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

这篇关于单击按钮后加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！