jquery - jQuery图片加载

Question

我需要一些关于 jQuery 的帮助。我想做的是创建某种小型的、非常非常简单的图片库。

我想在我的页面左侧放几张小图片。通过单击其中一张小图片，我想将此图片加载到另一个 div 中，并以全尺寸显示。

<a href="image1_big.jpg" class="smallpics" /><img src="image1_small" /></a>
<a href="image2_big.jpg" class="smallpics" /><img src="image2_small" /></a>
<a href="image3_big.jpg" class="smallpics" /><img src="image3_small" /></a>
<div id="bigpic" /><img src="image1_big" /></div>

我所有的 jQuery 尝试都失败了，因为我无法在这个 bigpic div 中更改图像的来源。

Answer 1

这应该为你做：

$(function(){
   $("a.smallpics").click(function(e){
      $("#bigpic").html('<img src="' + this.href + '" />');
      e.preventDefault();
   });
});

我也可以使用它（而不是前面示例中的类似行）：

$("#bigpic").empty().append($("<img />").attr('src', this.href));

但是第一个选项实际上会更快地执行它。只有一个电话，您将无法区分，因此如果选项二更易于阅读或书写，您可以使用它。