javascript - toggleClass 不会改变类

Question

我在 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 函数，但它仍然无法正常工作。

我哪里做错了？

问候

Answer 1

删除 . 中的 toggleClass。它只需要名称，因为 . 表示它是一个类并且它已经知道它是一个类。

$("#third").toggleClass('.pillar-animation-two');

应该是……

$("#third").toggleClass('pillar-animation-two');