toggleClass在单独的子元素上

Question

我在这样的函数中使用了toggleClass方法：

JS

$('section .handle').click(function() {
    $('section h3 i').toggleClass('rotate');
});

HTML

<section>
    <ul>
        <li>
            <div class="handle clearfix">
                <h3>item one <i class="fa fa-arrow-down"></i></h3>
            </div>
            <ul class="panel">
                <li>lorem ipsum</li>
                <li>lorem ipsum</li>
                <li>lorem ipsum</li>
            </ul>
        </li>
    </ul>
</section>
<section>
    <ul>
        <li>
            <div class="handle clearfix">
                <h3>item two <i class="fa fa-arrow-down"></i></h3>
            </div>
            <ul class="panel">
                <li>lorem ipsum</li>
                <li>lorem ipsum</li>
                <li>lorem ipsum</li>
            </ul>
        </li>
    </ul>
</section>

现在的问题是我有几个“i”元素，我需要在每个元素上切换类，而像这样，所有类都切换。

Answer 1

使用this引用点击的元素，然后只需在其中找到<i>。

$('section .handle').click(function() {
    $("i", this).toggleClass('rotate');
});