1

div「store_images」内の画像を使用したスライドショーです。同じページの複数のスライドショー: 最後の画像が最初に移動した後、次のスライドの画像をクリックします。1つしかない場合は機能しますが、2番目の部分で 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 に答える