删除和添加 css 类 onclick答案

【问题标题】：removing and adding css class onclick删除和添加 css 类 onclick
【发布时间】：2013-10-26 22:12:24
【问题描述】：

我在配置如何在 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 时，icon-minus-sign 应该被 icon-plus-sign 替换，并且每次点击都会继续切换。

我是使用 toggleClass 还是 removeClass 然后 addClass？

【问题讨论】：

使用删除类和添加类，因为工具删除和添加类，但不要将 icon-minus-sign 设置为 icon-plus-sign，反之亦然

标签： javascript jquery

【解决方案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')
});

演示：Fiddle

【讨论】：

这也为我不需要的所有嵌套元素添加了额外的 div
虽然这很好用，但通过 CSS 而不是 JS 不是更好吗？我的意思是，只要父类发生变化，就可以很容易地为子类设置不同的 CSS 样式。

【解决方案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);
        }
    });

【讨论】：