删除并添加CSS类onclick

Question

我在配置如何在onclick事件中更改div范围内的css类时遇到了一些麻烦。

JavaScript的：

$(document).on('click', '.list_accordion_toggle', function (event) {
            $(this).toggleClass('list_item collapse').next().toggle();
        });

视图：

<div class="list_accordion_toggle" id="letter">
        <span data-bind=" text: Letter"></span>
        <span class="icon-minus-sign"></span>
    </div>

当用户单击div时，应将图标减号替换为图标加号，并且每次单击都会继续进行切换。

我应该使用toggleClass还是removeClass然后再使用addClass？

Answer 1

尝试

$(document).on('click', '.list_accordion_toggle', function (event) {
    $(this).toggleClass('list_item collapse').next().toggle();
    $(this).find('.icon-minus-sign, .icon-plus-sign').toggleClass('icon-minus-sign icon-plus-sign')
});

演示： 小提琴

Answer 2

尝试这个

    iCount=0;
    $(document).on('click', '.list_accordion_toggle', function (event) {
        if(iCount==0){
        $(this).addClass(icon-minus-sign);
        $(this).removeClass(icon-plus-sign);
        iCount=1;
    }
    else{
        $(this).addClass(icon-plus-sign);
        $(this).removeClass(icon-minus-sign);
        }
    });