Question

我有以下HTML代码，如果我点击图片按钮'button.png'，相应的图片'image.png'将显示在'content'div中：

HTML：

<div>
  <a href="/static/images/image.png" class="content">
      <img src="/static/images/button.png" class="button">
  </a>
</div>
<div id="content"></div>

jQuery的：

$(document).ready(function() {
  $('a.content').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false
  });

然而，我无法正确显示图像（显示一堆代码）。请帮忙。谢谢。 }）;

Answer 1

The load method将尝试将给定的URL加载为HTML并将该HTML插入所选节点。 PNG不是HTML，因此load无效。而是添加具有适当img的{{1}}元素。这可能是这样实现的：

src

但是，您可能希望在添加之前清除$('<img>').attr('src', url).appendTo('#content'); content，因此图片不会累积。为此，您可以使用empty。

Answer 2

$(document).ready(function() {
$('a.content').click(function() {
    var url = $(this).attr('href');
    $('<img src="'+url+'">').appandTo("#content");
});

因为要显示图片，您必须使用<img>标记。 appendTo()有助于创建新的DOM。

Answer 3

你是如此接近完成它。

$(document).ready(function() {
  $('a.content').click(function() {
    var url = $(this).attr('href');
    $('#content').html($("<img/>").attr('src',url));
    return false
  }
);

您可以使用html（）方法清空/替换整个div内容。

jquery加载图像

3 个答案: