jQuery 图片加载

发布于 2024-08-13 05:55:07 字数 542 浏览 2 评论 0原文

我需要 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 中图像的来源。

原文

I need some help in jQuery. What I want to do is to create some kind of a small, very, very easy picture gallery.

I want to have a couple of small pictures on the left-hand-side of my page. By clicking one of these small pictures I'd like to load this picture into another div where it is shown in full size.

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

All my jQuery attemts failed as I could not change the source of the image within this bigpic div.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哭泣的笑容 2024-08-20 05:55:07

这应该适合你：

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

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

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

但第一个选项实际上会执行得更快一点。仅通过一次调用，您将无法分辨出差异，因此如果选项二更易于阅读或编写，您可以使用它。

This should do it for you:

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

I could have also used this (instead of the similar line in the previous example):

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

But the first option will actually execute it tiny bit faster. With only one call you won't be able to tell the difference, so if option two is easier to read or write, you can use that.

回复收藏 0 原文

~没有更多了~