jQuery：同一页面上有多个照片库

Question

我试图弄清楚如何在一个页面上多次使用 jQuery 照片库。大多数（如果不是全部）jQuery 画廊都使用 ID 来定位主画廊图像并替换属性。

如何构建图库并仅替换相关的主图库图像？

<div class="gallery">
    <div class="main_view">
        <img src="092519.jpg" alt="Some Image" />
    </div>
    <ul class="thumb">
        <li><a href="092519.jpg"><img src="092519.jpg" alt="" /></a></li>
        <li><a href="092520.jpg"><img src="092520.jpg" alt="" /></a></li>
        <li><a href="092521.jpg"><img src="092521.jpg" alt="" /></a></li>
        <li><a href="092522.jpg"><img src="092522.jpg" alt="" /></a></li>
        <li><a href="092523.jpg"><img src="092523.jpg" alt="" /></a></li>
        <li><a href="092524.jpg"><img src="092524.jpg" alt="" /></a></li>
        <li><a href="092525.jpg"><img src="092525.jpg" alt="" /></a></li>
        <li><a href="092526.jpg"><img src="092526.jpg" alt="" /></a></li>
    </ul>
</div>

jQuery：

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

Answer 1

最简单的方法是转到组父级，然后找到所需的元素。

$(this).parents('.gallery').find('.main_view');

Answer 2

这是一个简单的 jQuery 选择器，假设 this 是单击的 a 标签之一：

$(this).closest('div.main_view')