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

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

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

Answer 2

最容易找到组父母，然后找到你想要的元素。

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

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

2 个答案: