0

我创建一个图片库只是为了好玩，以扩展我对 JQUERY 的介绍性知识。画廊有一堆缩略图，当点击它们时，将在图像查看器 div 的正下方显示一个大图像。此外，当缩略图处于活动状态（正在查看图像）时，缩略图会从 75 像素动画到 100 像素。

我通过将 id 插入所有图像，然后通过每个图像锚点传递它来手动工作。结构如下：

<div class="thumbnails" id="thumbnail_1">
    <a href="#" class="thumb_link" onclick='loadImage("#thumbnail_1","#image_1", "1");'>
    <img src="image-url-#.png" alt="Image 1"  border="0"  id="image_1" class="thumb_img"  /></a> 
  </div>

对所有缩略图重复此操作。当用户点击时，图像被加载到 <div id="image_viewer"></div>

我的问题是我想让我的画廊尽可能动态。我想知道用户点击了哪个链接，而不必为每个缩略图创建一个 id。

我可以通过使用它来获取链接的数量，$(".thumb_link").length;这会给我提供缩略图链接的数量。但是我怎么知道点击了哪一个以显示与该缩略图相关的图像？

示例：用户点击第三个缩略图，显示 Thumb 3 的大图。

加载图像功能：

function loadImage(thumb, id, imgNum){  
    $(thumb).animate({width:100, height:100},500); 
            $(id).animate({width:100, height:100},500); 
            $(thumb + " a").animate({width:100, height:100},500);


            $("#image_viewer").html('<img src="imagesurl-'+ imgNum + '.jpg" border="0" alt="image: '+ imgNum+'" />');



    }

我希望能够通过每个标签分配给它的类来加载图像，如下所示：

$(".thumbnails").eq(whatever_the_index_value_is).animate({width:100, height:100},500);

我需要知道单击的数组值，以便访问此信息。

--

我想这样做的原因之一是我可以找到特定的缩略图属性（图像 alt 标题 src 等）并将它们插入其他地方。

欢迎任何帮助！

4

1 回答 1

2 
 $(document).ready(function(){
   $(".thumb_link").click(function(event){
     event.preventDefault();
     check_image($(this));
   });
 });

上面代码中的$(this)是一个 JavaScript 对象，其中包含点击的任何图像。然后，您可以查询它以获取您需要的任何信息。

于 2010-07-16T17:51:16.827 回答