javascript - Jquery 点击触发所有元素

Question

我正在尝试将 Bootstrap 的折叠功能与来自 font-awesome 的自定义图标一起使用。我能够使崩溃工作，但我遇到的问题是所有图标都是通过 Jquery 的单击触发的，我想对其进行缩放，因为在任何给定时间“容器”的数量都可能发生变化。任何建议表示赞赏。

$(document).ready(function () {
    $faChevronDown = $('.fa-chevron-down');
    var z = 0;
    $faChevronDown.click(function () {
        if (z == 0) {
            turnUp();
            z++;
        } else {
            turnDown();
            z = 0;
        }
    });
});

function turnUp() {
    $faChevronDown.removeClass('fa-chevron-down');
    $faChevronDown.addClass('fa-chevron-up');
};

function turnDown() {
    $faChevronDown.removeClass('fa-chevron-up');
    $faChevronDown.addClass('fa-chevron-down');
};

JS Fiddle

谢谢编辑:感谢您的精彩回答!

Answer 1

你只点击了一个元素，但是你的函数正在改变所有的图标，你使用了 $(this) 而不是为了只改变你点击的图标:

function toggleClass() {
    $(this).toggleClass('fa-chevron-down fa-chevron-up');
};

然后只使用一个函数:

$faChevronDown.click(toggleClass);

这样您就可以避免使用 Ifs 和 elses，并且代码更简单、更小。