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');

Answer 2

如果您使用toggleClass，则在声明课程时无需使用点（.）。

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

检查： - ）

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

元素没有document.getElementById('third').className = 'pillar-animation-two';方法。这是一个属性。使用Vanilla JS添加类名的正确方法是

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

这样做会覆盖元素的所有类。

你只需要

metadata = MetaData()

# This tuple of columns could be generated programmaticly
columns = (
    Column('design_name', String(80), primary_key=True),
    Column('user_name', String(80), nullable=False),
    Column('rev_tag', String(80), nullable=False),
    ...
)

designs = Table('designs', metadata, *columns)

class Designs(object):
    def __init__(self, json_data):    
      for key, value in data.iteritems():
        setattr(self, key, value)

mapper(Designs, designs)

<强> Check Fiddle

toggleClass不会改变类

4 个答案: