toggleClass 不会改变 class
toggleClass won't change class
我在 jQuery 中遇到 toggleClass
的问题。
代码如下:
$(".guzik").click(function() {
$("#third").toggleClass('.pillar-animation-two');
});
function test(){
document.getElementById('third').className('.pillar-animation-two');
}
.pillar {
width:50px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar:nth-child(1) {
margin-top:0;
}
.pillar-animation-one {
transform:rotate (10deg);
}
.pillar-animation-two {
transform:rotate (20deg);
width:10px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar-animation-three {
animation-name:three;
animation-duration:1s;
}
@keyframes three {
0%{transform:rotate(0deg);}
100%{transform:rotate(40deg);}
}
.button {
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar"></div>
<div class="pillar"></div>
<div class="pillar" id="third"></div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>
我做错了什么? addClass
也不起作用所以我真的很困惑。我也做了个JS函数,还是不行
我哪里做错了?
问候
元素没有 className
方法。这是一个属性。
使用 Vanilla JS 添加 class 名称的正确方法是
document.getElementById('third').className = 'pillar-animation-two';
这样做将覆盖元素的所有 classes。
你只需要
$(".button").click(function() {
$("#third").toggleClass('pillar-animation-two');
});
删除 toggleClass
中的 .
。它只需要名称,因为 .
表示它是 class 并且它已经知道它是 class.
$("#third").toggleClass('.pillar-animation-two');
应该...
$("#third").toggleClass('pillar-animation-two');
如果您使用 toggleClass
,则在声明 class.
时无需使用点 (.
)
$(".guzik").click(function() {
$("#third").toggleClass('pillar-animation-two');
});
function test() {
$('#third').toggleClass('pillar-animation-two');
}
.pillar {
width: 50px;
height: 10px;
background-color: red;
margin-top: 5px;
}
.pillar:nth-child(1) {
margin-top: 0;
}
.pillar-animation-one {
transform: rotate (10deg);
}
.pillar-animation-two {
transform: rotate (20deg);
width: 10px;
height: 10px;
background-color: red;
margin-top: 5px;
}
.pillar-animation-three {
animation-name: three;
animation-duration: 1s;
}
@keyframes three {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(40deg);
}
}
.button {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar">
</div>
<div class="pillar">
</div>
<div class="pillar" id="third">
</div>
</div>
<button class="button" type="button" onclick="test()">Click me !</button>
<button class="guzik">Another Click me!</button>
检查这个:-)
$(".pillar").click(function()
{
$(".pillar").toggleClass('pillar-animation-two');
});
function test(){
$("#third").toggleClass('pillar-animation-two');
//document.getElementById('third')[0].toggleClass('pillar-animation-two');
}
.pillar
{
width:50px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar:nth-child(1)
{
margin-top:0;
}
.pillar-animation-one
{
transform:rotate (10deg);
}
.pillar-animation-two
{
transform:rotate (20deg);
width:10px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar-animation-three
{
animation-name:three;
animation-duration:1s;
}
@keyframes three
{
0%{transform:rotate(0deg);}
100%{transform:rotate(40deg);}
}
.button
{
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar">
</div>
<div class="pillar">
</div>
<div class="pillar" id="third">
</div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>
我在 jQuery 中遇到 toggleClass
的问题。
代码如下:
$(".guzik").click(function() {
$("#third").toggleClass('.pillar-animation-two');
});
function test(){
document.getElementById('third').className('.pillar-animation-two');
}
.pillar {
width:50px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar:nth-child(1) {
margin-top:0;
}
.pillar-animation-one {
transform:rotate (10deg);
}
.pillar-animation-two {
transform:rotate (20deg);
width:10px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar-animation-three {
animation-name:three;
animation-duration:1s;
}
@keyframes three {
0%{transform:rotate(0deg);}
100%{transform:rotate(40deg);}
}
.button {
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar"></div>
<div class="pillar"></div>
<div class="pillar" id="third"></div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>
我做错了什么? addClass
也不起作用所以我真的很困惑。我也做了个JS函数,还是不行
我哪里做错了?
问候
元素没有 className
方法。这是一个属性。
使用 Vanilla JS 添加 class 名称的正确方法是
document.getElementById('third').className = 'pillar-animation-two';
这样做将覆盖元素的所有 classes。
你只需要
$(".button").click(function() {
$("#third").toggleClass('pillar-animation-two');
});
删除 toggleClass
中的 .
。它只需要名称,因为 .
表示它是 class 并且它已经知道它是 class.
$("#third").toggleClass('.pillar-animation-two');
应该...
$("#third").toggleClass('pillar-animation-two');
如果您使用 toggleClass
,则在声明 class.
.
)
$(".guzik").click(function() {
$("#third").toggleClass('pillar-animation-two');
});
function test() {
$('#third').toggleClass('pillar-animation-two');
}
.pillar {
width: 50px;
height: 10px;
background-color: red;
margin-top: 5px;
}
.pillar:nth-child(1) {
margin-top: 0;
}
.pillar-animation-one {
transform: rotate (10deg);
}
.pillar-animation-two {
transform: rotate (20deg);
width: 10px;
height: 10px;
background-color: red;
margin-top: 5px;
}
.pillar-animation-three {
animation-name: three;
animation-duration: 1s;
}
@keyframes three {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(40deg);
}
}
.button {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar">
</div>
<div class="pillar">
</div>
<div class="pillar" id="third">
</div>
</div>
<button class="button" type="button" onclick="test()">Click me !</button>
<button class="guzik">Another Click me!</button>
检查这个:-)
$(".pillar").click(function()
{
$(".pillar").toggleClass('pillar-animation-two');
});
function test(){
$("#third").toggleClass('pillar-animation-two');
//document.getElementById('third')[0].toggleClass('pillar-animation-two');
}
.pillar
{
width:50px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar:nth-child(1)
{
margin-top:0;
}
.pillar-animation-one
{
transform:rotate (10deg);
}
.pillar-animation-two
{
transform:rotate (20deg);
width:10px;
height:10px;
background-color:red;
margin-top:5px;
}
.pillar-animation-three
{
animation-name:three;
animation-duration:1s;
}
@keyframes three
{
0%{transform:rotate(0deg);}
100%{transform:rotate(40deg);}
}
.button
{
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hamburger">
<div class="pillar">
</div>
<div class="pillar">
</div>
<div class="pillar" id="third">
</div>
</div>
<button class="button" type="button" onclick="test()"> Click me !</button>