我已经做了一个jQuery插件工作DRY:

$.fn.toggle2classes = function(class1, class2){ if( !class1 || !class2 ) return this; return this.each(function(){ var $elm = $(this); if( $elm.hasClass(class1) || $elm.hasClass(class2) ) $elm.toggleClass(class1 +' '+ class2); else $elm.addClass(class1); }); }; // usage example: $(document.body).on('click', () => { $(document.body).toggle2classes('a', 'b') }) body{ height: 100vh } .a{ background: salmon } .b{ background: lightgreen } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> Click anywhere

如果你的元素从一开始就公开类A，你可以这样写:

$(element).toggleClass("A B");

这将删除类A并添加类B。如果您再次这样做，它将删除类B并恢复类A。

如果你想匹配公开任意一个类的元素，你可以使用一个多类选择器并写:

$(".A, .B").toggleClass("A B");

以下是一个简化版本:(虽然不优雅，但易于理解)

$("#yourButton").toggle(function() 
{
        $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'

}, function() {
        $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a'

});

另外，还有一个类似的解决方案:

$('#yourbutton').click(function()
{
     $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});

我已经做了一个jQuery插件工作DRY:

$.fn.toggle2classes = function(class1, class2){ if( !class1 || !class2 ) return this; return this.each(function(){ var $elm = $(this); if( $elm.hasClass(class1) || $elm.hasClass(class2) ) $elm.toggleClass(class1 +' '+ class2); else $elm.addClass(class1); }); }; // usage example: $(document.body).on('click', () => { $(document.body).toggle2classes('a', 'b') }) body{ height: 100vh } .a{ background: salmon } .b{ background: lightgreen } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> Click anywhere

你的onClick请求:

<span class="A" onclick="var state = this.className.indexOf('A') > -1; $(this).toggleClass('A', !state).toggleClass('B', state);">Click Me</span>

试试吧:https://jsfiddle.net/v15q6b5y/

只是 JS à la jQuery：

$('.selector').toggleClass('A', !state).toggleClass('B', state);

用Jquery切换两个类'A'和'B'。

(' # selecor_id’美元)。toggleClass(“B”);