Question

我正在尝试匹配滑块大图像和它的拇指之间的两个index值。当点击一个拇指时，我得到它的index()值并尝试与另一个列表匹配以显示该图像。

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

无论如何，如果你想保留你的代码的逻辑，问题是关于你的最后一行的函数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);

});

如何根据ul li索引值创建简单的滑块？

1 个答案: