0

ちょっと変わったもので、

私は2つのulを持っており、それぞれに同じ数のliがあります...

jQueryでは、いずれかのul liをオーバーオーバーして表示できるようにしたいので、対応するli（他のulから）はクラス「highlight」を取得します...

リストの上から数を数えることでできるのに？

しかし、それをどのように行うかはまだわかりません。

これが私が探しているものの視覚的表現です：

ここに画像の説明を入力してください

4

3 に答える 3

4 
$('#list1 > li').hover(function() {
    $('#list2 > li').eq($(this).index()).addClass('hover');
}, function() {
    $('#list2 > li').eq($(this).index()).removeClass('hover');
});

または、双方向で必要な場合：

$('.list > li').hover(function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').addClass('hover');
}, function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').removeClass('hover');
});

デモ： http： //jsfiddle.net/ThiefMaster/XNRux/

于 2012-05-09T06:29:23.540 に答える
1

これを試して：

$("ul.list1>li").hover(function(){
      var ind=$(this).index();
   $(this).css("background-color","red");
   $('ul.list2 li:eq('+ind+')').css("background-color","red");
},
function(){
    var ind=$(this).index();
  $(this).css("background-color","transparent");
   $('ul.list2 li:eq('+ind+')').css("background-color","transparent");
});

$("ul.list2>li").hover(function(){
    var ind=$(this).index();
   $(this).css("background-color","blue");
   $('ul.list1 li:eq('+ind+')').css("background-color","blue");
},
function(){
    var ind=$(this).index();
   $(this).css("background-color","transparent");
   $('ul.list1 li:eq('+ind+')').css("background-color","transparent");
});

そしてここに詳細なJSFiddleがあります

于 2012-05-09T06:39:58.030 に答える
0 
$('li', 'ul.list1, ul.list2').hover(

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').addClass('highlight');

},

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').removeClass('highlight');

});

デモ

于 2012-05-09T06:30:02.313 に答える