按鈕點擊添加/刪除類

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"); 
});