如何在同一页面上有多个 jQuery 图像交换画廊？答案

【问题标题】：How to have multiple jQuery Image Swap Galleries on the same page?如何在同一页面上有多个 jQuery 图像交换画廊？
【发布时间】：2011-02-19 10:01:13
【问题描述】：

我有多个使用以下代码的图片库（只需在以下链接中查看演示）。

但是，当单击一个画廊的缩略图以更改大图像预览时 - 所有画廊也会自动更改为该大预览。

简而言之，问题是：

“如何将每个画廊彼此分开，以便当用户单击某个特定画廊的缩略图时，该画廊的大图像预览会发生变化，而不是其他任何画廊？”

JavaScript：

$("ul.thumb li a", $(".item")).click(function() {
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img", $(".item")).attr({ src: mainImage });
    return false;       
});

});

HTML：

<div class="item">
   <h2>The Money Growing Door</h2>
   <div id="main_view">
     <img src="images/1.jpg" class="uks" alt="#" />
   </div>
   <ul class="thumb">
     <li><a href="images/1.jpg"><img src="images/colours/sinine.png" alt="#" /></a></li>
     <li><a href="images/3.jpg"><img src="images/colours/must.png" alt="#" /></a></li>
     <li><a href="images/1.jpg"><img src="images/colours/valge.png" alt="#" /></a></li>
   </ul>
</div>

基本上，我会重复在以下代码中看到的相同 HTML 和 Javascript： http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ 只有我在同一页面上有多个画廊。

【问题讨论】：

$("ul.thumb li a", $(".item")).click(function() { var mainImage = $(this).attr("href"); //查找图像名称 $("#main_view img", $(".item")).attr({ src: mainImage }); return false; }); }); html 是：

金钱增长之门

$("ul.thumb li a", $(".item")).click(function() { var mainImage = $(this).attr("href"); //查找图片名称 $ ("#main_view img", $(".item")).attr({ src: mainImage }); return false; }); });我将在下一个 com 上获取 html。
我作为新手无法编辑自己的帖子，所以我必须将代码放在 cmets 中，这真的很糟糕
这里是html：
赚钱之门
我给你一个可能的解决方案...

金钱增长之门

赚钱之门