1

这是一个使用 div 'store_images' 中的图像的幻灯片。同一页面上的多个幻灯片：单击图像以查看下一张幻灯片，最后一张图片后转到第一张。如果我只有一个，它可以工作，但我必须在第二部分中实现 each() 条件，因为它们更多，我不知道如何。

$(function(){
    $('.store_images').each(function(){
    $(this).find('.store_book_image:gt(0)').hide(); 
});

$(this).find('img').click(function () {
    $('.store_images :first-child').hide()
       .next('img').show()
       .end().appendTo('.store_images');
}); });

谢谢，

更新：HTML

<div style="cursor:e-resize;" class="store_images">
                <img class="store_book_image" src="{{ book.image1.url }}" />
                <img class="store_book_image" src="{{ book.image2.url }}" />
                <img class="store_book_image" src="{{ book.image3.url }}" />
                <img class="store_book_image" src="{{ book.image4.url }}" />
</div>
4

1 回答 1

2

你可以试试这个：

$(this).find('img').click(function () {
    var $parentDiv = $(this).closest('.store_images');
    $(':first-child',$parentDiv).hide()
       .next('img').show()
       .end().appendTo($parentDiv);
});

也就是说，单击特定 img 元素时，会找到它所属的“store_images”div，而不是选择所有“store_images”div。

顺便说一句，为什么$(this).find('img')而不是$('img')？我假设那时this是document.

于 2012-07-17T14:10:45.540 回答