1

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

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

简而言之，问题是：

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

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/ 只有我有多个画廊在同一个页。

4

1 回答 1

0

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

所以我想你有很多<ul class="thumb">？？

如果是这样，然后尝试

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

快速演示

于 2010-05-14T08:09:03.577 回答