2013-12-07 4 views
0

Итак, я просмотрел stackoverflow перед публикацией этого вопроса, но не нашел надежного ответа, поэтому я публикую это. Я не спрашиваю, как переключать формы с помощью бутстрапа, как я уже это сделал. http://cdpn.io/luotABootstrap Modal Form Switch - функция One Click

Каковы мои вопросы, как я могу упростить использование селекторов jquery в качестве одной функции. То, что мне нужно сделать для этого, - это вызывать каждый клик отдельно для каждой кнопки, чтобы сделать коммутатор. Пожалуйста, см. Ручку http://cdpn.io/luotA - нажмите на правую ручку в левом нижнем углу, чтобы изменить и внесите изменения.

Что я хочу - это одна простая функция щелчка, чтобы выполнить одно и то же. Любые предложения и ответы будут замечательными. Вы можете использовать fork pen и post back 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'); 
       }); 
+0

Не могли бы вы опубликовать соответствующий код? – dcodesmith

+0

Только что отправил код - чтобы упростить это в одну функцию, чтобы сделать более эффективным. Спасибо – alvaram

ответ

0

Просто быстро, что я писал:

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

+0

Это замечательно. Умный способ сделать это, что я искал. Спасибо за отправку обратной ссылки, чтобы поделиться рабочим примером. – alvaram