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

});​