这是在jQuery中访问数组元素的正确方法吗？

Question

我有两个数组。一个用于导航，另一个用于页面上的面板。这些阵列的大小相同。一个面板的一个导航按钮。这段代码可以工作，但是我确信在没有设置临时变量的情况下，必须有更好的方法来做到这一点。

$('.footer-nav li').click(function() 
{ 
    var temp = $('.footer-nav li').index(this); 
    var tArray = $('.about-bgs li'); 
    $('.about-bgs li').fadeOut(); 
    $(tArray[temp]).fadeIn(); //This is the line in question! 
}); 

任何接受者？

Answer 1

jQuery回调到$(selector).each(callback)accepts two parameters：index和element。所以，你可以写

$('.footer-nav li').each(function(index, element) { 
    element.click(function(evt) { 
    $('.about-bgs li').fadeOut(); 
    $('.about-bgs li').get(index).fadeIn(); 
    }); 
}); 

但是，这似乎是一个奇怪的密码给我，因为有间动画冲突列表中的所有元素（这是淡出），并指定一个（在衰落）。我认为它不会按预期工作。

因为似乎只有一个元素是一次明显的，我会淡出只有当前可见的一个（不是说你需要检查在相同的元素连续两次点击）：

var current = $('.about-bgs li').fadeOut(); 
var last = $('.about-bgs li .current'); 
if (current !== last) { 
    last.removeClass('current').fadeOut(); 
    current.addClass('current').fadeIn(); 
} 

在DOM加载时，您必须指定一个.current元素并运行此功能（或者相应地使用CSS/JS进行播放）。

Answer 2

我想你应该已经能够只使用tArray[$(this)].fadeIn()

编辑：一些其他的东西：正如你已经写var tArray = $('.about-bgs li');，你可以只使用tArray.fadeOut();