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

Question

我知道已经有人问过类似的问题，但我的例子完全不同，无法让它发挥作用。

示例：http: //jsfiddle.net/xhUZd/

<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>

使命：

悬停时

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

span.two from "Box2" - 将类 "bg2" 添加到 span.two 从 "Box1"

span.three from "Box2" - 添加 CLASS "bg3" 到 span.three from "Box1"

这必须单独在每个“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 小提琴演示。

如果您想再次单击（或交替单击）切换类名，请替换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 小提琴演示。

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

$('#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 演示，由 OP 本人改编/更正。

参考：

• addClass().
• closest().
• find().
• index().
• on().
• toggleClass().

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')]);
    });
});