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

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

2 个答案: