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

Question

我想匹配滑塊大的圖像之間有兩個index價值和它的大拇指。當一個拇指點擊，我得到它index()價值，並嘗試匹配另一個列表以顯示圖像。

Here is jsFiddle example.

的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); 
});​ 

注：I can do this with id/class logic但需要這種方式來解決這個問題。

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

無論如何，如果你想保持你的代碼的邏輯，問題是關於性能指標（）對你最後的行，它返回一個jQuery對象的索引，但不是給定索引的jQuery對象。

據jQuery的API指數的互補功能（）是獲得（），但它只返回的DOM元素，因此你可以調用淡入（）把它。

你需要做的就是通過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); 

});​