悬停在2 li上添加课程

时间:2013-12-18 17:24:29

标签: jquery hover addclass

我有两个单独的ul列表,当我将li悬停在任一列表中时,它需要添加类悬停 - 并与两个列表对应。

因此,如果我将鼠标悬停在任一列表中的第一个li上,我想将类悬停添加到两个li的

如果你看看到目前为止我得到了什么。我想要它,所以如果你滚动列表类中的相应项目,hover会被添加到两个li中。而不是像在小提琴上那样只添加一个地方。

http://jsfiddle.net/5Dx58/3/

<div class="price-table-container">

<div class="panel-one">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<div class="panel-two">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>    

    $(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(function() {
$(this).addClass('hover');
    }, function() {
$(this).removeClass('hover'); 
});

由于

3 个答案:

答案 0 :(得分:1)

获取index的{​​{1}}并根据li查找添加/删除课程。

li

Updated fiddle here.

答案 1 :(得分:1)

以下是另一种解决问题的方法:

  • 获取当前li的索引号
  • 抓住悬停小组的班级名称
  • 专门更新其他面板的相应li元素
  • 删除悬停类更容易 - 一次从所有li元素中删除

-> jsFiddle Demo <-

var ndx, ol, $this;
$(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(
    function() {
        $this = $(this);
        ndx = $this.index();
        ol = ($this.parent().parent().attr('class') == 'panel-one') ? 'panel-two' : 'panel-one';

        $this.addClass('hover');
        $('.'+ol).find('li:eq(' +ndx+ ')').addClass('hover')
    }, 
    function() {
        $('li').removeClass('hover'); 
});

答案 2 :(得分:1)

略短的版本

$(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(function() {
    var index = $(this).index() + 1;
    $('.price-table-container li:nth-child(' + index + ')').addClass('hover');
        }, function() {
    var index = $(this).index() + 1;
    $('.price-table-container li:nth-child(' + index + ')').removeClass('hover');;
});

Updated fiddle