JQUERY 多个图像的点击事件

Question

我创建一个图片库只是为了好玩，以扩展我的 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>

这对所有缩略图都重复。当用户点击时，图像被加载到

我的问题是我想让我的画廊尽可能动态。我希望有某种方法知道用户单击了哪个链接，而不必为每个缩略图创建 id。

我可以使用 $(".thumb_link").length; 获取链接数量，这将为我提供缩略图链接的数量。但我如何才能知道正在单击哪一个来显示与该缩略图相关的图像呢？

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

loadImage 函数：

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 title src 等）并将它们插入到其他地方。

欢迎任何帮助！

Answer 1

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

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