jQuery中最简单的切换两个类的方法

Question

如果我有类名为 .A 和 .B，想要在按钮点击时切换它们，有什么好的 jQuery 解决方案？我还不明白 toggleClass() 是如何工作的。

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

- Stewie Griffin

---

使用内联JS (onclick="") 是不好的。为什么不使用jQuery来注册一个适当的事件处理程序（如果您有许多具有相同处理程序的元素，则可以使用代理/存活事件）？ - ThiefMaster

Answer 1

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

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

这将删除类A并添加类B。如果您再次执行此操作，它将删除类B并恢复类A。

如果您想匹配暴露任一类的元素，可以使用多个类选择器并编写：

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

- Frédéric Hamidi

---

如果我想根据状态而不是元素来放置A类或B类，该怎么办？ - Stewie Griffin

请注意，应缓存要切换的对象而不是每次选择元素，切换类最常见的用法是在点击处理程序中。 var $trigger = $(".A"); $trigger.on("click", function() {$trigger.toggleClass("A B")}); - mummybot

@mummybot - 被标记为居高临下。Frédéric - 如果元素从一开始就没有任何类呢？那也是一个重要的状态。 - vsync

不再起作用，现在同时添加和移除两个类。 - Fabián

@FrédéricHamidi，我不知道我做错了什么，但当我尝试时它没有起作用。现在看起来没问题了。在我的情况下，它同时添加和删除了两个类，但现在似乎可以工作了。可能我搞砸了其他东西，影响了这个函数。我已经删除了我的评论。对于造成的困惑，我很抱歉。 - BurakUeda

Answer 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
});

- Rion Williams

---

我相信在jQuery 2.0中，使用toggle的方式已经过时了。 - vittore

谢谢你，维托雷。这明显是2011年的旧回答。我已经相应地更新了语法。 - Rion Williams

Answer 3

我制作了一个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

- vsync

Answer 4

最简单的解决方法是分别使用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，所以每次你切换两者时，一个会离开以供另一个出现。

- Overcomer

Answer 5

您的 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/

---

仅使用类似jQuery的JS代码：

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

- gdibble

Answer 6

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

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

- Love Kumar

Answer 7

这里有另一种“非常规”的方法。

• 它涉及使用underscore或lodash。
• 它假设一个上下文，其中：
  • 元素没有init类（这意味着您不能执行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);

- Luca Reghellin