css类没有根据click事件正确切换

Question

我目前有一个div默认减号,当我点击它时它会变为加号,但当我再次点击加号时它不会切换回减号.如何更改我的JavaScript以便它根据点击在类之间切换？

$(document).on('click', '.header', function (event) {
    $(this).nextUntil(".header").toggle();
    document.getElementById("toggleIcon").className = "icon-plus";
});

默认是icon-minus,当我点击它时它会变为icon-plus,当我再次点击它时它应该切换回icon-minus但它没有这样做.

HTML

<div class="accordion-group" data-bind="foreach: Types">
    <div class="text_x-large header"> 
         <span data-bind="text:Name()"></span> 
         <span id="toggleIcon" class="icon-minus"></span>
    </div>
    <div data-bind="foreach: Users">
        <!-- ko if: Letter -->
        <div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
        <!-- /ko -->
        <div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
    </div>
</div>

Answer 1

用于toggleClass根据需要切换类名:

$(document).on('click', '.header', function (event) {
    $(this).nextUntil(".header").toggle();
    $("#toggleIcon").toggleClass("icon-plus icon-minus");
});

当我点击第二个或第三个div时,我有多个div它只会改变第一个div的图标

在这种情况下,您不应该使用a id来选择它.将其更改toggleIcon为a class,然后使用它.

$(".toggleIcon", $(this)).toggleClass("icon-plus icon-minus");