关于toggleclass：在jQuery中切换2个类的最简单方法


Easiest way to toggle 2 classes in jQuery

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

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

相关讨论

如果您的元素从一开始就公开类A，则可以编写：

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

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

如果要匹配公开任何一个类的元素，则可以使用多个类选择器并编写：

1
$(".A, .B").toggleClass("A B");
相关讨论

这是一个简化的版本：(尽管不优雅，但易于理解)

1
2
3
4
5
6
7
8
$("#yourButton").toggle(function()
{
        $('#target').removeClass("a").addClass("b"); //Adds 'a', removes 'b'

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

});

或者，类似的解决方案：

1
2
3
4
$('#yourbutton').click(function()
{
     $('#target').toggleClass('a b'); //Adds 'a', removes 'b' and vice versa
});
相关讨论

我已经制作了一个用于DRY的jQuery插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.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);
  });
};

您可以在这里尝试，复制并在控制台中运行，然后尝试：

1
$('body').toggle2classes('a', 'b');

您的onClick请求：

1
<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 jQuery：

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

这是另一种"非常规"方式。

  • 它暗示使用下划线或破折号。
  • 它假定您在以下环境中：

    • 元素没有初始化类(这意味着您不能执行toggleClass('a b'))
    • 您必须从某个地方动态获取课程

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

1
2
3
4
5
6
7
8
// 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);

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

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

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

假设您有一个图标：

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

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

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

由于每次您同时切换fa-angle-down和fa-angle-down时，我们都将fa-angle-down设为fa-angle-down，所以其中一个离开而另一个出现。