jquery幻灯片导航问题

Question

我正在制作带有两个导航元素（顶部和底部）的幻灯片。我已经多次使用了代码，但从来没有这样做过。

$('#list-links li a, #list-tab li a').hover(function(){ 
    $('#list-links li, #list-tab li').removeClass('hover'); 
    var i = $(this).index('#list-links li a, #list-tab li a'); 
    $(this).parent().addClass('hover'); 
    $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)}); 
}); 

基本上，这增加并删除一个类（悬停）到列表，以便我可以相应的样式。问题是它不会以这种方式工作。导航变得独立，这意味着虽然导航a）可能在第二张幻灯片上，但导航b）不会更新，并且如果它将在幻灯片上则仍然具有悬停类。有人可以帮忙吗？

哦，原来完整的代码是这样的：

$(document).ready(function() { 

// Declare variables 
var width = 718; // width of slide - required for animation calculation 
var slides = $('#list-images li'); 
var numSlides = slides.length; 

// Wrap the slides & set the wrap width - this will be used to animate the slider left/right 
slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width}); 
$('#slide-wrap').css({width: width * numSlides}); 

// Hover function - animate the slides based on index of active link 
$('#list-links li a').hover(function(){ 
    $('#list-links li').removeClass('hover'); 
    var i = $(this).index('#list-links li a'); 
    $(this).parent().addClass('hover'); 
    $('#slide-wrap').stop().animate({'marginLeft' : width*(-i)}); 
}); 

Answer 1

难道你还发布你的商标吗？

我猜想，您可以通过更换这行修复：

$(this).parent().addClass('hover'); 

有了这个：

$('ul li:nth-of-type(' + (i+1) + ')').addClass('hover'); 

这将悬停类适用于li两个导航栏的正确索引。

Working jsFiddle

---

另外，删除这样的类时，我觉得这是一个很好的做法非常普遍的方式来选择，所以如果有什么是分配类时出错它会被修复。另一个好的做法是将这个类包含在你的选择器中，以便jQuery不必不必要地查看那些没有这个类的元素。

$('ul li.hover').removeClass('hover'); 

---

来源（S）

http://api.jquery.com/index/

https://developer.mozilla.org/en-US/docs/CSS/:nth-of-type