toggleClass 不会改变 class

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

元素没有 className 方法。这是一个属性。使用 Vanilla JS 添加 class 名称的正确方法是

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

这样做将覆盖元素的所有 classes。

你只需要

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

Check Fiddle

Answer 2

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

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

应该...

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

Answer 3

如果您使用 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>

Answer 4

检查这个:-)

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

toggleClass 不会改变 class

toggleClass won't change class

javascript

jquery

css

toggleclass