0

Jqueryのスライドショーを作成しています。サムネイルが一覧表示され、クリックすると大きな画像がオーバーレイとして表示されます。親指を大きな画像と一致させるために、各サムネイルと大きな画像に属性を追加しています。属性には、各親指を対応する大き​​な画像に一致させる番号が含まれています。1つのページに1つのスライドショーが存在する場合に機能します。ただし、複数のスライドショーが存在する場合は機能させたいと思います。

親指や大きな画像に属性を追加するためのコードは次のとおりです。

thumbNo = 0;
largeNo = 0;
$('.slideshow_content .thumbs img').each(function() {            
   thumbNo++;
   $(this).attr('thumbimage', thumbNo);
   $(this).attr("title", "Enter image gallery");
});
$('.slideshow_content .image_container .holder img').each(function() {   
   largeNo++;
   $(this).addClass('largeImage' + largeNo);
});

これは機能します。1つのページに2つのスライドショーがある場合にインクリメントを機能させるために、このコードを各関数に貼り付けることができると思いました...

$('.slideshow').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this + '.slideshow_content .thumbs img').each(function() {            
       thumbNo++;
       $(this).attr('thumbimage', thumbNo);
       $(this).attr("title", "Enter image gallery");
    });
    $(this + '.slideshow_content .image_container .holder img').each(function() {   
       largeNo++;
       $(this).addClass('largeImage' + largeNo);
    });
});

これに伴う問題は、2番目のスライドショーdiv（.slideshow）でインクリメント演算子がリセットされないため、最初の.slideshow divの親指に1、2、3などの番号が付けられ、2番目のスライドショーdivに親指が表示されることです。スライドショーdivの番号は4、5、6などです。2番目の.slideshow divの番号をリセットして、1から再開するにはどうすればよいですか。

これを簡潔に説明するのは本当に難しいです。誰かが要点を理解してくれることを願っています。

4

1 に答える 1

1

それぞれで、レベルを下げて、次のように各スライドショーにスコープが設定されていることを確認します。

$('.slideshow_content').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this).find('.thumbs img').each(function() {
       $(this).attr('thumbimage', thumbNo++);
       $(this).attr("title", "Enter image gallery");
    });
    $(this).find('.image_container .holder img').each(function() {   
       $(this).addClass('largeImage' + largeNo++);
    });
});

.slideshow_contentこれにより、全体を設定してからすべてのブロックをループするのではなく、各ブロック内で0に設定してループ内でループします。

于 2010-03-17T13:04:44.947 に答える