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