如何根據ul li索引值創建簡單的滑塊？

Question

我正在嘗試在滑塊大圖像和大拇指之間匹配兩個index值。 當一個拇指單擊時，我正在獲取它的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邏輯來做到這一點，但需要通過這種方式解決。

Answer 1

如果必須這樣做，我會選擇這樣的方法：

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);

});​