如何根据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，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);

});​