多个图像的 JQUERY 点击事件答案

【问题标题】：JQUERY Click events for multiple Images多个图像的 JQUERY 点击事件
【发布时间】：2010-07-16 17:39:01
【问题描述】：

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

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

欢迎任何帮助！

【问题讨论】：

标签： jquery click onclick image-gallery multiple-instances

【解决方案1】：

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

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

【讨论】：

感谢您的帮助。您的回答对我帮助很大！