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

javascript函数隐藏/显示div

 $(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"); to var registerBox = $("#register-box");