简体   繁体   中英

Bootstrap Modal Form Switch - One Click Function

So I've looked around stackoverflow before posting this question, but didn't find a solid answer, so I'm posting this. I'm not asking how to switch forms using bootstrap as I have already accomplished that here - http://cdpn.io/luotA

What my questions is how I can simplify my jquery selectors to be one function. What I'm having to do now for this to work is to call each click out separately for each button to make the switch happen. Please see pen http://cdpn.io/luotA - click on edit pen on the lower left to fork and make changes

What I want is one simple click function to accomplish the same thing. Any suggestions and or answers would be great. You can fork pen and post back url for working examples.

Thanks in advance.

Here is the code:

              $("#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');
              });

Just a quick thing I wrote:

$("#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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM