单击按钮时添加/删除类

Add/remove class on button click

本文关键字：删除 添加 按钮 单击      更新时间：2023-09-26

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>

从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 附加事件处理程序。

试试这个：

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