javascript - 如何使用javascript仅选择一个li元素？

Question

这应该是一个简单的修复，但我还无法理解 javascript 选择器。我有一个 h3 li 元素列表，每个元素都包含单击时显示的内容。我想要一个切换箭头在单击时从上变为下。但对于下面的 JS 代码，所有 li 元素都会发生这种情况，包括未显示折叠内容的元素。我该如何解决这个问题？

$(document).ready(function () {

$('#toggle-view li').click(function () {
    var text = $(this).children('div.panel');
    if (text.is(':hidden')) {
        text.slideDown('200');
        $("h3 .fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
    } else {
        text.slideUp('200');
        $("h3 .fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
    }

});
});

这是 html，以防您需要:

<ul class="services-ul facebook-ul" id="toggle-view">
        <li>
        <h3><i class="fa fa-check"></i>Header 1<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 2<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 3<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
        <li>
        <h3><i class="fa fa-check"></i>Header 4<i class="fa fa-caret-up"></i></h3>
                <span>+</span>
                <div class="panel">
                    <p>dummy text...</p>
                </div>
        </li>
    </ul>

Answer 1

您需要指定与 this 相关的元素(在您的 click 事件中是已被单击的 li 元素)。

只需将 this 包装在 jQuery 选择器中 ($(this))，然后使用 jQuery's find() method查找其中包含的元素:

$(this).find('.fa-caret-up').removeClass('.fa-caret-up').addClass('.fa-caret-down');

还有:

$(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');