Question

所以我在发布这个问题之前已经查看了stackoverflow，但没有找到一个可靠的答案，所以我发布了这个。我没有问如何使用bootstrap切换表单，因为我已经在这里完成了 - http://cdpn.io/luotA

我的问题是如何将jquery选择器简化为一个函数。我现在要做的就是为每个按钮单独调出每次点击以使切换发生。请参阅笔http://cdpn.io/luotA - 点击左下角的编辑笔进行分叉并进行更改

我想要的是一个简单的点击功能来完成同样的事情。任何建议和/或答案都会很棒。您可以使用fork pen和post 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

Bootstrap模态表单开关 - 一键式功能

1 个答案: