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

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

1 个答案: