Question

我知道类似的情况已经被问到了，但我的例子却完全不同，并且无法使其成功。

<ul id="list">
<li>
    <div class="box1">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
    <div class="box2">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
</li>
<li>
    <div class="box1">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
    <div class="box2">
       <span class="one"></span>
       <span class="two"></span>
       <span class="three"></span>
    </div>
</li>
</ul>

使命：

当HOVER

span.one来自“Box2” - 将“bg1”添加到“Box1”中的span.one

span.two来自“Box2” - 将“bg2”添加到“Box1”中的span.two

span.three来自“Box2” - 将“bg3”添加到“Box1”中的span.three

这必须单独在每个“li”中使用。

请帮忙！

Answer 1

我建议：

$('#list').on('click', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).addClass('bg' + (i + 1));
});

JS Fiddle demo

如果您希望第二次点击（或替代点击）切换班级名称，请将addClass()替换为toggleClass()：

$('#list').on('click', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).toggleClass('bg' + (i + 1));
});

JS Fiddle demo

不知何故，我设法错过了在悬停元素时操纵类的要求，而不是点击;因此，承认实际的工作答案如下：

$('#list').on('mouseenter mouseleave', '.box2 span', function(){
    var self = $(this),
        box1 = self.closest('li').find('.box1'),
        i = self.index();
    box1.find('span').eq(i).toggleClass('bg' + (i + 1));
});

JS Fiddle demo，由OP自己调整/纠正。

参考文献：

Answer 2

显然我完全错过了要求。这是一个新尝试，假设您希望悬停行为跟随所有LI中所有DIV的所有SPAN - 悬停在.box3中的span.two上会将类bg2添加到.box2中的span.two。

$(function () {
    var classMap = {
        one: 'bg1',
        two: 'bg2',
        three: 'bg3'
    };

    $('#list').on('mouseenter mouseleave', 'li div span', function () {
        var $this = $(this);
        $this
            .closest('div')
            .prev('div')
            .find('span.' + $this.attr('class'))
            .toggleClass(classMap[$this.attr('class')]);
    });
});

如何使用JQuery在LI中按类选择元素

2 个答案: