javascript - jQuery 替换 div 内容

Question

我正在玩 Bootstrap 模态，我想在单击按钮时更改 div 的内容。这是代码:

模态内容的html代码

<div class="modal-content">
  <div class="modal-body">
    <div id="login-box" class="animated fadeIn">
        Login form
        <button id="show-register">Register</button>
    </div>
    <div id="register-box" class="animated fadeIn">
        Register form
        <button id="show-login">Login</button>
    </div>
  </div>
</div>

CSS 样式

#register-box {
    display: none;
}

用于隐藏/显示 div 的 javascript 函数

 $(document).ready(function(){
  loginRegisterSwitch();
 });

function loginRegisterSwitch(){
    var registerBtn = $("#show-register");
    var loginBtn = $("#show-login");
    var registerBox = $("register-box");
    var loginBox = $("#login-box");

    registerBtn.on('click',function(){
        loginBox.hide();
        registerBox.css('display','block');
    });

    loginBtn.on('click', function(){
        registerBox.hide();
        loginBox.css('display','block');
    });
}

当用户单击注册按钮时，登录表单 div 隐藏并显示注册框。我无法使此代码正常工作(当用户单击注册按钮时，注册 div 显示但登录 div 不隐藏)。我想知道是否有更好的方法来实现这一点，例如使用 jQuery html()

Answer 1

您在 registerBox 的选择器中遗漏了 #。

将 var registerBox = $("register-box"); 更改为 var registerBox = $("#register-box");