如何在一个元素上切换一个特定的类，其中分配了多个类？ [英] How to toggle a specific class on an element where there are multiple classes assigned?

问题描述

我有一个有多个类的元素。

I have an element that has multiple classes. I would like to just switch between one of the classes when I click it.

<span class="icon-expand desktop-only mt8 pl4" id="toggle-site-content-width"></span>

当我点击这个，我需要改变 icon-expand 转换为 icon-reduce ，只保留其他类。

When I click this, I need to just change icon-expand into icon-reduce, and just leave the other classes as is.

当我使用 $（this）.toggleClass（'icon-reduce'）。当我这样做时会发生同样的情况： $（this）.toggleClass（'icon-expand'，'icon-reduce'）。

It just adds the class at the end when I'm using $(this).toggleClass('icon-reduce'). Same happens when I'm doing this: $(this).toggleClass('icon-expand','icon-reduce').

这是完整的代码：

$(function(){
    $('#toggle-site-content-width').click(function(){  //  on click
        $('#site-content').children('div').toggleClass('content-align-center');  //  remove this class to expand the view to full available window width
        $(this).toggleClass('toggle-expand','icon-reduce');  //  change the icon
        $(this).trigger('resize');  //  trigger the window to rearrange masonry bricks
    });
});

推荐答案

您需要更改：

$(this).toggleClass('toggle-expand','icon-reduce');  

到：

$(this).toggleClass('toggle-expand icon-reduce');

您不需要通过，这里。

这篇关于如何在一个元素上切换一个特定的类，其中分配了多个类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！