Question

我正在尝试使用Bootstrap的Collapse功能和来自font-awesome的自定义图标。我能够让崩溃工作，但我遇到的问题是所有的图标都是用Jquery的点击触发的，我想缩放它，因为在任何给定的时间都有＆＃34;容器和＃34;可以换。任何建议都表示赞赏。

$(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

在.fa-chevron-down元素的父元素上设置单击处理程序，或者如果在body元素上未知父元素：

$(document).ready(function () {
    var z = 0;
    $("body").on("click", ".fa-chevron-down", function () {
        if (z == 0) {
            turnUp.call(this);
            z++;
        } else {
            turnDown.call(this);
            z = 0;
        }
    });
});

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

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

如果您仅将z变量用于切换类fa-chevron-down和fa-chevron-up，则代码可以简化为：

$(document).ready(function () {
    $("body").on("click", ".fa-chevron-down", function () {
        $(this).toggleClass('fa-chevron-down fa-chevron-up');
    });
});

Answer 2

您只点击了一个元素，但您的功能正在更改所有图标，您使用$（this）代替只更改您点击的图标：

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

然后只使用一个函数：

$faChevronDown.click(toggleClass);

通过这种方式，您可以避免使用Ifs和elses，并且代码更加简单和小巧。

Answer 3

您可以传入元素以执行粒度切换，

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

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

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

Answer 4

我不确定z变量的重点是什么，但您可以减少所拥有的内容，并通过使用this来修复不引用该元素的问题：

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

<强> jsFiddle example

Jquery点击触发所有元素

4 个答案: