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

jquery幻灯片导航问题

1 个答案: