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

我有两个数组.一个用于导航,另一个用于页面上的面板.阵列的大小都相同.一个面板的一个导航按钮.这段代码有效,但我确信在没有设置临时变量的情况下必须有更好的方法.

$('.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!
});

任何接受者？

解决方法

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).