用于div中缩略图的jQuery fadeIn-代码不工作_Jquery_Css_Image_Html_Fadein

用于div中缩略图的jQuery fadeIn-代码不工作

jquery css image html

用于div中缩略图的jQuery fadeIn-代码不工作,jquery,css,image,html,fadein,Jquery,Css,Image,Html,Fadein,我有一个div，里面有一堆缩略图。每个图像都指定了rel属性，我想使用该值在另一个div中弹出缩略图的全尺寸图像我想使用jQuery fadeIn函数。我的代码不起作用，而且我对jQuery也不太了解这个代码怎么了 <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .i

我有一个

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>


伊姆格迪夫先生{
/*最初，覆盖是隐藏的*/
显示：无；
$（'#book img'）。单击（函数（）{
$（'book img[rel]'）。fadeIn（'slow'）；
});

简单：

 $('#book > img').click(function() {      
      $("div.imgdiv").hide();
      $(this).fadeIn('slow'); 
 });

我建议在

rel

上使用html5数据属性。类似于

data largeimage=“#photo1”

另外，在文档就绪函数中定义click事件：

$（function（）{//do stuff}）

Naveed代码的扩展：

$(function(){

 $('#book > img').click(function() {      
  $("div.imgdiv").hide();
  var largeImage = $(this).data('largeimage');
  $(largeImage ).fadeIn('slow'); 

 }); 

});

如果要使用旧的选择器，请将

$（'#book img[rel]'）

更改为

$（'#book img[rel=“”+variable+'”）

将单击函数中的代码更改为此

$（“#”+$（this.attr（“rel”））.fadeIn（“slow”）；

请首先查看

rel

标记中的，您需要将

放在前面，以便它查找ID时给出错误

错误：语法错误，无法识别的表达式：#[对象]源文件：http://code.jquery.com/jquery-latest.js 行：4179

谢谢！非常好用。我非常感谢示例链接，这样我就可以准确地看到代码应该是怎样的。