Question

我想toggle 2个不同的班级。（A b），但我没有得到结果。我的代码有什么问题？

＆＃13;

$('button').on('click', function () {
    $('div').toggleClass("A B");
});

＆＃13;

div{
    height:20px;
}
.A{
    border:1px solid red;
}

.B{
    border:1px solid blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<button>Color Change</button>

＆＃13;

Answer 1

给你的div一个“入门”课程。否则，第一个将'切换'，下一个'切换两个'等等。

由于两者都设置了边框，因此正在使用最后一个应用的类，而另一个被忽略，因此您将看不到“红色”边框。

将其视为在一个类之间切换 - 打开或关闭。如果你从 no class 开始，那么按钮将添加该类（可以理解）。

如果您使用两个类进行切换，则适用相同的规则。你从关闭开始，然后按钮将在上切换 - 并且由于css应用的顺序/ css的特殊性，第二个将覆盖第一个css定义。

因此，为了“切换”，您需要从“开启”位置开始，一个位于“关闭”位置。你去吧！按下按钮后，将从开启切换到关闭，反之亦然。

$('button').on('click', function() { $('div').toggleClass("A B"); });

div { height: 20px; } .A { border: 1px solid red; } .B { border: 1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="A"></div> <button>Color Change</button>

Answer 2

$('button').on('click', function () {
    $('div').toggleClass("A B");
});

div{
    height:20px;
}
.A{
    border:1px solid red;
}

.B{
    border:1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>

Answer 3

无需切换两个类。您需要分配的一个课程和可以切换的另一个课程。

<强> HTML

 <div class="A"></div>
 <button>Color Change</button>

<强> JQUERY

$('button').on('click', function () {
    $('div').toggleClass("B");
});

<强> CSS

div{
    height:20px;
}
.A{
   border:1px solid red;
}

.B{
   border:1px solid blue;
}

JSFIDDLE DEMO

如果你在这里看到逻辑很简单。单击该按钮时，会将名为B的其他类添加到div中。点击按钮后，您的div代码将变为此<div class="A B"></div>

因此，CSS中A和B的顺序非常重要。例如，如果您将B class移到A class的顶部，那么您将无法获得所需的结果。

不能使用CSS：

div{
    height:20px;
}
.B{
   border:1px solid blue;
}
.A{
   border:1px solid red;
}

否则，您可以使用important关键字，这样就不会担心订单，但在实践中效果不佳。

'toggleClass` - 如何在两个不同的`class`名称之间“切换”

3 个答案: