Bootstrap模態形式開關-一鍵式功能

Question

因此，在發布此問題之前，我已經查看了stackoverflow，但沒有找到一個可靠的答案，因此我將其發布。 我沒有問如何使用引導程序來切換表單，因為我已經在此處完成了操作-http: //cdpn.io/luotA

我的問題是如何將jquery選擇器簡化為一個功能。 為此，我要做的就是為每個按鈕分別調用每次單擊以進行切換。 請查看筆http://cdpn.io/luotA-單擊左下角的編輯筆進行分叉並進行更改

我想要的是一個簡單的單擊功能即可完成相同的操作。 任何建議和/或答案將是巨大的。 您可以使用分叉式筆寫回URL，以獲取工作示例。

提前致謝。

這是代碼：

              $("#join-trigger").click(function(){
               $('#modal-login').modal('hide');
               $('#modal-join').modal('show');
              });

              $("#forgot-trigger").click(function(){
                $('#modal-login').modal('hide');
                $('#modal-forgot').modal('show');
              });

              $("#login-trigger").click(function(){
                $('#modal-join').modal('hide');
                $('#modal-login').modal('show');
              });

              $("#back-login").click(function(){
                $('#modal-forgot').modal('hide');
                $('#modal-login').modal('show');
              });

              $("#back-join").click(function(){
                $('#modal-forgot').modal('hide');
                $('#modal-join').modal('show');
              });

Answer 1

我寫的一個簡短的東西：

$("#join-trigger, #forgot-trigger, #login-trigger, #back-login, #back-join").click(function(){
  var hash = {
    'join-trigger': ['modal-login', 'modal-join'],
    'forgot-trigger': ['modal-login', 'modal-forgot'],
    'login-trigger': ['modal-join', 'modal-login'],
    'back-login': ['modal-forgot', 'modal-login'],
    'back-join': ['modal-forgot', 'modal-join']
  };

  $('#' + hash[$(this).attr('id')][0]).modal('hide');
  $('#' + hash[$(this).attr('id')][1]).modal('show');
});

http://codepen.io/anon/pen/kECDA