0

2 つのナビゲーション要素 (上部と下部) を持つスライドショーを作成しています。私はコードを数回使用しましたが、この方法で使用したことはありません。

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

基本的に、これはリストにクラス (ホバー) を追加および削除して、それに応じてスタイルを設定できるようにします。問題は、この方法では機能しないことです。naviagtion は独立しました。つまり、ナビゲーション a) が 2 番目のスライドにある可能性がありますが、ナビゲーション b) は更新されず、スライド 1 にある場合でもホバー クラスが保持されます。誰か助けてくれませんか？

ああ、元の完全なコードは次のとおりです。

$(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)});
});
4

1 に答える 1

0

マークアップも投稿できますか？

次の行を置き換えることで修正できると思います。

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

これとともに：

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

これにより、ホバー クラスがli両方のナビゲーション バーの正しいインデックスに適用されます。

ワーキングjsFiddle

また、このようなクラスを削除するときは、非常に一般的な方法でクラスを選択することをお勧めします。これにより、クラスの割り当て時に問題が発生した場合に修正されます。もう 1 つの良い方法は、そのクラスをセレクターに含めることです。これにより、jQuery がそのクラスを持たない要素を不必要に調べる必要がなくなります。

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

ソース

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

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

于 2013-04-03T11:37:47.777 に答える