在jQuery中切换2个类最简单的方法
如果我有类.A和类.B，并希望在button单击之间切换，那么在jQuery中有什么好的解决scheme？ 我仍然不明白toggleClass()是如何工作的。
是否有内联的解决scheme，把它放在onclick=""事件？
如果你的元素从头开始暴露类A ，你可以写：
$(element).toggleClass("AB");
这将删除类A并添加类B 如果再次这样做，它将删除类B并恢复类A
如果要匹配公开的任何类的元素，可以使用多个 类select器并写入：
$(".A, .B").toggleClass("AB");
这里是一个简化的版本:( 虽然不是优雅，但易于遵循 ）
$("#yourButton").toggle(function() { $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b' }, function() { $('#target').removeClass("b").addClass("a"); //Adds 'b', removes 'a' });
或者，类似的解决scheme：
$('#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); }); };
你可以在这里试试，在控制台中复制并运行它，然后尝试：
$('body').toggle2classes('a', 'b');
这是另一种“非传统”的方式。
- 它意味着使用下划线或lodash 。
- 它假设您在以下情况下：
- 该元素没有init类（这意味着你不能做toggleClass（'a b'））
- 你必须从某个地方dynamic获取这个类
这种情况下的一个例子可能是button，有类切换到另一个元素（例如容器中的标签）。
// 1: define the array of switching classes: var types = ['web','email']; // 2: get the active class: var type = $(mybutton).prop('class'); // 3: switch the class with the other on (say..) the container. You can guess the other by using _.without() on the array: $mycontainer.removeClass(_.without(types, type)[0]).addClass(type);
您的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);
