Question

这是使用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>

Answer 1

你可以试试这个：

$(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。

在同一页面上为多个幻灯片显示每个（）

1 个答案: