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関数を作ったが、まだ動作していない。

ここで私は間違いをしましたか？

はElementはclassNameメソッドを持っていない

Answer 1

この:-)をチェック

$(".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>

Answer 2

に挨拶します。それはプロパティです。 バニラJSを使用して、クラス名を追加するための正しい方法は、要素のためのすべてのクラスをオーバーライドしますそう

document.getElementById('third').className = 'pillar-animation-two'; 

です。

あなただけtoggleClassで.を削除

$(".button").click(function() { 
    $("#third").toggleClass('pillar-animation-two'); 
}); 

Check Fiddle

Answer 3

を必要としています。 .はそのクラスを示しており、既にそのクラスを知っているので、名前だけが必要です。

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

あなたがtoggleClassを使用している場合は、クラスを宣言しながら、ドット（.）を使用する必要はありません...

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

Answer 4

であるべき。

$(".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>