div 中缩略图的 jQuery fadeIn - 代码不起作用
我有一个 div ，其中包含一堆缩略图。每个图像都指定了 rel 属性，我想使用该值在另一个 div 中弹出缩略图的全尺寸图像。
我想使用 jQuery fadeIn 函数。我的代码无法正常工作......而且我根本不太了解 jQuery。
这段代码有什么问题？
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.imgdiv {
/* initially overlay is hidden */
display:none;
</style>
</head>
<body>
<div id="book">
<img src="thumbnails/book1.png" width="100" height="123" rel="photo1"/>
<img src="thumbnails/book2.png" width="100" height="123" rel="photo2"/>
</div>
<div class="imgdiv" id="photo1">
<img src="thumbnails/booklarge1.png" />
</div>
<div class="imgdiv" id="photo2">
<img src="thumbnails/booklarge2.png" />
</div>
<script>
$('#book img').click(function() {
$('#book img[rel]').fadeIn('slow');
});
</script>
</body>
</html>
I have a div that holds a bunch of thumbnail images. Each image has the rel attribute specified and I would like to use that value to pop up the full size image of the thumbnail in another div.
I want to use the jQuery fadeIn function. My code isn't working..and I don't know jQuery very well at all.
What's wrong with this code?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.imgdiv {
/* initially overlay is hidden */
display:none;
</style>
</head>
<body>
<div id="book">
<img src="thumbnails/book1.png" width="100" height="123" rel="photo1"/>
<img src="thumbnails/book2.png" width="100" height="123" rel="photo2"/>
</div>
<div class="imgdiv" id="photo1">
<img src="thumbnails/booklarge1.png" />
</div>
<div class="imgdiv" id="photo2">
<img src="thumbnails/booklarge2.png" />
</div>
<script>
$('#book img').click(function() {
$('#book img[rel]').fadeIn('slow');
});
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将 click 函数内的代码更改为此
$("#"+$(this).attr("rel")).fadeIn('slow');请参阅 此处
Change the code inside your click function to this
$("#"+$(this).attr("rel")).fadeIn('slow');see here
我建议使用 html5 数据属性而不是
rel。类似data-largeimage="#photo1"另外，在文档就绪函数中定义点击事件：
$(function(){ //do stuff })的扩展Naveed 的代码：
如果您想使用旧的选择器，请将
$('#book img[rel]')更改为$('#book img[rel="' + variable + '"]')I would suggest using html5 data attribute over
rel. Something likedata-largeimage="#photo1"Also, define the click event in a document ready function:
$(function(){ //do stuff })Extension of Naveed's code:
If you would like to use your old selector, change
$('#book img[rel]')to$('#book img[rel="' + variable + '"]')简单的：
Simple: