jquery - jquery加载图片

Question

我有以下 html 代码，如果我单击图像按钮“button.png”，则相应的图像“image.png”将显示在“内容”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

该load方法将尝试将给定的 URL 加载为 HTML 并将该 HTML 插入到选定的节点中。PNG 不是 HTML，因此load无法正常工作。相反，添加一个img带有适当src. 这可能是这样实现的：

$('<img>').attr('src', url).appendTo('#content');

但是，您可能希望content div在附加之前清除 ，这样就不会建立图像。为此，您可以使用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 内容。