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

问题描述 投票:0回答:7

如果我有类 .A 和类 .B 并且想在单击按钮时在它们之间切换,那么 jQuery 中有什么好的解决方案呢?我还是不明白

toggleClass()
是如何工作的。

是否有内联解决方案将其放入

onclick=""
事件中?

jquery toggleclass
7个回答
596
投票

如果你的元素从一开始就暴露了类

A
,你可以写:

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

这将删除类

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

如果您想匹配公开任一类的元素,您可以使用 multiple class 选择器 并编写:

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

49
投票

这是一个简化版本:虽然不优雅,但易于理解

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

5
投票

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


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
,所以每次切换两者时,一个都会离开另一个出现。


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

2
投票

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

$('#selecor_id').toggleClass("AB");


1
投票

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

  • 这意味着使用 下划线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);
© www.soinside.com 2019 - 2024. All rights reserved.