5

我有两个数组。一个用于导航，另一个用于页面上的面板。数组的大小相同。一个面板一个导航按钮。此代码有效，但我确信必须有更好的方法来执行此操作，而无需设置临时变量。

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

有接盘侠吗？

4

2 回答 2

2

jQuery 回调$(selector).each(callback) 接受两个参数：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）。

于 2012-09-27T13:50:41.940 回答
0

我认为你应该能够使用tArray[$(this)].fadeIn()

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

于 2012-09-27T13:52:12.423 回答