0

indexスライダーの大きな画像と親指の間で2つの値を一致させようとしています。親指をクリックすると、そのindex()値が取得され、別のリストと照合してその画像を表示しようとします。

これが jsFiddle の例です。

jQuery:

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');

thumbs.click(function() {
    var target = $(this).index();
    bigImg.fadeOut(300);
    //problem here
    bigImg.index(target).fadeIn(300);
});​

注: id/class ロジックでこれを行うことができますが、この方法で解決する必要があります。

4

1 に答える 1

0

私がそれをしなければならなかったら私はこのようなもので行くでしょう：

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');

thumbs.click(function() {
    var target = $(this).index();
    bigImg.each(function(){
        if($(this).index() != target){
            $(this).fadeOut(300);
        }else{
            $(this).fadeIn(300);
        }
    });    
});​

とにかく、コードのロジックを維持したい場合、問題は最後の行の関数index（）にあり、jQueryオブジェクトのインデックスを返しますが、特定のインデックスのjQueryオブジェクトは返しません。

jQuery APIによると、index（）の補完関数はget（）ですが、DOM要素のみを返すため、fadeIn（）を呼び出すことができます。

あなたがする必要があるのは、eq（）メソッドを介してjQueryオブジェクトを取得することです：

var thumbs = $('ul.thumbHolder li');
var bigImg = $('ul.imgHolder li');
thumbs.click(function() {
    var target = $(this).index();

    bigImg.fadeOut(300);

    bigImg.eq(target).fadeIn(300);

});​
于 2012-09-18T10:49:22.463 に答える