2

jQueryを使用して、対応するサムネイルがクリックされたときに大きな画像を表示/非表示にするクリック可能なサムネイルのdivを含む独自のギャラリーを生成しようとしています。

私はそれを動作させていますが、ギャラリー内の既知の数の画像（この場合は3）のみを使用しています。ギャラリーに30枚の画像がある場合はどうなりますか？以下のコードを30回書き出す必要はありません！

私が本当に欲しいのは、このコードを変更することです。

$('#slideshow-thumbs img.1').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.1').removeClass('hide');
    $('#main-slideshow img.1').addClass('show');
});

$('#slideshow-thumbs img.2').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.2').removeClass('hide');
    $('#main-slideshow img.2').addClass('show');
});

$('#slideshow-thumbs img.3').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.3').removeClass('hide');
    $('#main-slideshow img.3').addClass('show');
});

...このような形式に（nは数値、jはギャラリー内の画像の総数）：

for (n=1; n<=j; n++) {

$('#slideshow-thumbs img.n').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.n').removeClass('hide');
    $('#main-slideshow img.n').addClass('show');
});

}

しかし、私はそれに慣れていないので、jQueryでこれを正しく書く方法がわかりません。本当に助けていただければ幸いです！また、スクリプトでj（ギャラリー内の画像の総数）も計算して（私が想定しているhtmlから検出することにより）、スクリプトが任意のサイズの任意のギャラリーで機能するようにします。

助けてくれてありがとう。

関連するHTML：

<div id="main-slideshow">
    <img class="1 show" src="images/booklet-open.jpg"/>
    <img class="2 hide" src="images/booklets.jpg" />
    <img class="3 hide" src="images/poster-1.jpg" />
</div>

<div id="slideshow-thumbs">
    <img class="1 active" src="images/booklet-open-thumb.jpg" />
    <img class="2 inactive" src="images/booklets-thumb.jpg" />
    <img class="3 inactive" src="images/poster-1-thumb.jpg" />
</div>

関連するCSS：

.inactive {
    opacity:0.5;
}

.active {
    opacity: 1;
}

.hide {
    display:none;
}

.show {
    display:block;
}
4

2 に答える 2

1

文字列ではなく、変数nを使用する必要があります。要素を再フェッチする必要がないため、最後の2つのステートメントも組み合わせました。ダニーが指摘したように、jは次のように見つけることができます。

試行1（間違った）：

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        $('#main-slideshow img.show').removeClass('show').addClass('hide');
        $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
    });
}

ただし、このソリューションはループの問題の影響を受けやすくなっています。基本的に、コードのその部分はクロージャにあるため、ループが進行nした後でも変数への参照を保持します。forしたがって、imgをクリックすると、最大n値（この場合は4）が検索され、何も起こりません。nこれを回避するには、オブジェクト（この場合は関数）で使用する値を入れてみてください。解決策はたくさんありますので、お気軽に試してみてください。

試行2（正解）：

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        toggleImages(n);
    });
}

function toggleImages(n) {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
}
于 2013-01-16T20:28:20.200 に答える
0

それほど多くのクラスやforループは必要ありません。このデモを見てくださいhttp://jsfiddle.net/eaTjM/1/

$("#slideshow-thumbs img").click(function(){
  $(this).addClass("active").siblings().removeClass("active");
  $("#main-slideshow img").eq($(this).prevAll().length)
    .addClass("show").siblings().removeClass("show")
});

$(this).prevAll().lengthクリックされたプレビューインデックスを提供し、.eq()メソッドはこのインデックスによって画像を提供します。

于 2013-01-16T20:43:01.290 に答える