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

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

来自“Box2”的span. Three - 将类“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 本人改编/更正。

引用文献:

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