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