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