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

Question

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

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

Answer 1

如果你的元素A从一开始就暴露了类,你可以写:

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

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

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

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

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

Answer 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

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