按钮点击添加/删除类

Question

JavaScript按钮点击添加/删除类问题。它只是不会执行该功能。

通读了许多堆栈溢出解决方案，但没有一个适用于这种特殊情况。

这些是元素：

// CSS 

.hideWelcome{ 
    display: none; 
} 

.autoHide { 
    display: none; 
} 

// JavaScript Hide Welcome 

    $(document).ready(function() {  
     $("#showFormBtn").live("click", function() { 
     $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome"); 
     $("#formInput").toggleClass("autoHide"); 
    }); 
}); 


    // Welcome Div 

    <div class="container"> 
     <div class="row"> 
      <div id="WelcomeDiv" class="one-half column fadeInUp animated" style="margin-top: 25%"> 
       <h4>Make a Difference</h4> 
       <p>Volunteer today!</p> 
       <div class="bounceIn animated"> 
       <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/> 
       </div> 
      </div> 

    // Div to show 

      <div id="formInput" class="one-half column fadeInUp animated autoHide" style="margin-top: 25%"> 
       <h4>HELLO YA'LL</h4> 
       <p>Howdy!</p> 
       <div class="bounceIn animated"> 
        <input type="button" id="showFormBtn" name="showFormBtn" class="button button-primary" value="Sign Up"/> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

在jQuery 1.7的，所述方法.live()不推荐使用。使用.on()附加事件处理程序。

试试这个：

$("#showFormBtn").on("click", function() { 
    $("#WelcomeDiv").toggleClass("fadeOutUp animated hideWelcome"); 
    $("#formInput").toggleClass("autoHide"); 
});