jQuery的切换/取消添加/删除类

Question

I have this piece of code here:

$('.plus-area-current').click(function () {
        $(".current-communities").slideToggle(function () {
            $(".plus-area-current i").removeClass("fa-plus");
            $(".plus-area-current i").addClass("fa-minus");
        }, function () {
            $(".plus-area-current i").removeClass("fa-minus");
            $(".plus-area-current i").addClass("fa-plus");
        });
    });

When the user clicks plus-area-current, current-communities gets untoggled, what I am trying to is add / remove the fa-plus and fa-minus classes from an element pending if the element current-communities is toggled or not. This code above does not work, the element toggles but the class does not change, if I do this:

$('.plus-area-current').click(function () {
        $(".current-communities").slideToggle();
        $(".plus-area-current i").removeClass("fa-plus");
        $(".plus-area-current i").addClass("fa-minus");
    });

It works, but when I click to toggle it back up, its does not change back to the plus.

Answer 1

Use toggleClass() instead:

$('.plus-area-current').click(function () {
    $(".current-communities").slideToggle();
    $(".plus-area-current i").toggleClass("fa-plus fa-minus");
});

If you'd prefer the class change not to happen until the slideToggle() animation has completed, place that line within the callback, like this:

$('.plus-area-current').click(function () {
    $(".current-communities").slideToggle(function() {
        $(".plus-area-current i").toggleClass("fa-plus fa-minus");
    });
});