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

如果我有类a和类。b，并想在按钮点击之间切换，什么是一个很好的解决方案在jQuery?我仍然不明白toggleClass()是如何工作的。

有没有内联解决方案把它放在onclick=""事件?

227407 次浏览
小开
最佳答案

如果你的元素从一开始就公开类A，你可以这样写:

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

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

如果你想匹配公开任何一个类的元素，你可以使用多个 类选择器并写:

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

以下是一个简化版本: (虽然不优雅，但易于遵循)

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

我已经做了一个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

小开

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

  • 它意味着使用下划线或lodash。
  • 它假设一个上下文，其中您:
    • 元素没有init类(这意味着你不能使用toggleClass('a b'))
    • 你必须从某个地方动态地获取类
      • 李< / ul > < / >

    这种场景的一个例子可以是按钮，其中包含要在另一个元素上切换的类(例如容器中的制表符)。

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

你的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);
小开

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

小开

用Jquery切换两个类'A'和'B'。

$ (" # selecor_id”)。toggleClass(“B”);


提交答案