在 jQuery 中切换 2 个类的最简单方法答案

【问题标题】：Easiest way to toggle 2 classes in jQuery在 jQuery 中切换 2 个类的最简单方法
【发布时间】：2021-04-05 16:06:46
【问题描述】：

如果我有 .A 类和 .B 类并且想要在按钮单击之间切换，那么在 jQuery 中有什么好的解决方案？我还是不明白toggleClass() 是怎么工作的。

是否有内联解决方案将其放入onclick="" 事件中？

【问题讨论】：

内联 JS (onclick="") 不好。你为什么不使用 jQuery 来注册一个合适的事件处理程序（或者如果你有很多具有相同处理程序的元素，则使用委托/实时事件）

【解决方案1】：

如果你的元素从一开始就暴露了 A 类，你可以这样写：

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

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

如果你想匹配暴露任一类的元素，你可以使用 multiple class selector 并写：

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

【讨论】：

如果我想根据状态放置 A 类或 B 类而不是元素怎么办？
请注意，您应该缓存您尝试切换的对象，而不是每次都选择元素，切换类的最常见用法是在单击处理程序中。 var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")});
@mummybot - 被标记为居高临下。 Frédéric - 如果元素“从一开始”就没有任何类怎么办？这也是一个重要的状态。
这不再起作用了。现在同时添加和删除两个类。
@FrédéricHamidi 我不知道我做错了什么，但是当我尝试时它不起作用。现在看来还不错。就我而言，它同时添加和删除了两个类，但它现在似乎工作了。可能我搞砸了其他东西，它影响了这个功能。我删除了我的评论。很抱歉造成混乱。

【解决方案2】：

这是一个简化版本：（虽然不优雅，但易于理解）

$("#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
});

【讨论】：

我相信这种使用 toggle 的方式在 jquery 2.0 中被弃用了
谢谢维托雷。这显然是 2011 年的旧答案。我已经相应地更新了语法。

【解决方案3】：

我已经为 DRY 制作了一个 jQuery 插件：

$.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

【讨论】：

【解决方案4】：

您的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);

【讨论】：

【解决方案5】：

最简单的解决方案是分别toggleClass() 两个类。

假设你有一个图标：

    <i id="target" class="fa fa-angle-down"></i>

要在fa-angle-down 和fa-angle-up 之间切换，请执行以下操作：

    $('.sometrigger').click(function(){
        $('#target').toggleClass('fa-angle-down');
        $('#target').toggleClass('fa-angle-up');
    });

由于我们一开始有fa-angle-down 而没有fa-angle-up ，因此每次切换两者时，一个离开另一个出现。

【讨论】：

【解决方案6】：

这是另一种“非传统”方式。

暗示使用underscore或lodash。
它假定您在以下环境中：
- 该元素没有初始化类（这意味着您不能执行 toggleClass('a b')）
- 您必须从某处动态获取类

这种情况的一个示例可能是具有要在另一个元素上切换类的按钮（例如容器中的选项卡）。

// 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);

【讨论】：

【解决方案7】：

使用 Jquery 在两个类“A”和“B”之间切换。

$('#selecor_id').toggleClass("A B");

【讨论】：