Как можно сократить код и не использовать повторения?

Question

[Максим]

Здравствуйте!

Написал скрипт для сайта. Может в нем вы и увидите ошибки, но на сайте все работает корректно.
Вот код:

$('#button-1').click(  // открываем модальное окно
        function(){
             $('#modal-button-1').slideToggle(
                function(){
                    $('#modal-button-1').removeClass( "disabled" );
                });
             $('#modal-button-1-content').hide( 
                function(){
                    $('#modal-button-1-content').load('page-content/price.html', 
                        function(){
                           $('#modal-button-1-content').fadeIn('slow');
                        });
                });
        }),
        
$('#button-close-1').click(  // закрываем модальное окно нажатием на крестик 
        function(){ 
             $('#modal-button-1').slideToggle(
                function(){
                    $('#modal-button-1').addClass( "disabled" );
                });
             $('#modal-button-1-content').empty();
        });
        
$(document).click(   // закрываем модальное окно нажатием вне модального окна
        function (event){
            if ( $('#modal-button-1').hasClass('disabled') ) {
                return false;}
            else {
                if (!$( event.target ).is('#wrapper-mid')) {   }
                else {
                    $('#modal-button-1').slideToggle(
                        function(){
                            $('#modal-button-1').addClass( "disabled" );
                        });
                    $('#modal-button-1-content').empty();
                } 
            }
        });
        
$('#button-2').click(   // открываем модальное окно
        function(){
             $('#modal-button-2').slideToggle(
                function(){
                    $('#modal-button-2').removeClass( "disabled" );
                });
             $('#modal-button-2-content').hide( 
                function(){
                    $('#modal-button-2-content').load('page-content/order.html', 
                        function(){
                           $('#modal-button-2-content').fadeIn('slow');
                        });
                });
        }),
        
$('#button-close-2').click(  // закрываем модальное окно нажатием на крестик 
        function(){ 
             $('#modal-button-2').slideToggle(
                function(){
                    $('#modal-button-2').addClass( "disabled" );
                });
             $('#modal-button-2-content').empty();
        }),

$(document).click(   // закрываем модальное окно нажатием вне модального окна
        function (event){
            if ( $('#modal-button-2').hasClass('disabled') ) {
                return false;}
            else {
                if (!$( event.target ).is('#wrapper-mid')) {   }
                else {
                    $('#modal-button-2').slideToggle(
                        function(){
                            $('#modal-button-2').addClass( "disabled" );
                        });
                    $('#modal-button-2-content').empty();
                } 
            }
        });

Получается у меня 2 кнопки и 2 модальных окна.
И функции при нажатии на эти 2 кнопки одинаковые, просто там стоят разные элементы.
Вопрос: Как можно сократить код и использовать меньше повторений?

Answer 1

[Stalker_RED]

Вынесите повторяющиеся фрагменты в функции.

Comments

[Максим]

Да, но в них есть различия по названиям селекторов. Как мне сделать чтобы одна и та же функция работала в отношении определенных элементов в зависимости от того в каком блоке я нажал на кнопку?
Нужно вводить переменные и в зависимости от названия селектора кнопки по которой я кликнул подменять значения переменных которые потом подставятся в названия селекторов модальных окон?
В итоге функция будет записана также как сейчас только в одном повторе, а вместо названия селекторов будут перменные которые будут динамически подставляться?
Или есть вариант проще и элегантней?

[Stalker_RED]

max_shane, передавать селкторы как параметры.
А вообще, судя по наличию всяких 1 и 2 в id, возникает подозрение, что вы пока не умеете в traversing.
Без разметки точнее не получится, телепатия слабовато работает.

[Максим]

Stalker_RED, Спасибо! Почитаю про traversing.

Answer 2

[Максим]

Вот, пока придумал такое решение. Но начал я его делать до комментария Stalker_RED про traversing.
Просто решил доделать данный способ раз начал, чтобы понять как это работает.
Имена селекторов изменил в ходе работы, не обращайте внимание.
Все работает! А код стал в 3 раза короче. Как я и хотел.

$('[data-num]').click(  // открываем мод. окно при клике на элемент который имеет атрибут data-num
       //в data-num у меня просто содержится целое число
        function(){
        itemNum = $(this).attr('data-num'); // беру число из data-num
             $('#modal-'+itemNum).slideToggle(
                function(){
                    $('#modal-'+itemNum).removeClass( "disabled" );
                });
             $('#modal-content-'+itemNum).hide( 
                function(){
                    $('#modal-content-'+itemNum).load('page-content/'+itemNum+'.html', 
                        function(){
                           $('#modal-content-'+itemNum).fadeIn('slow');
                        });
                });
        }),

$('.close').click(  // закрываем мод. окно при клике на элемент который имеет класс .close
        function(){ 
             $('#modal-'+itemNum).slideToggle(
                function(){
                    $('#modal-'+itemNum).addClass( "disabled" );
                });
             $('#modal-content-'+itemNum).empty();
        }),

$(document).click(  // закрываем мод. окно при клике вне конкретного блока
        function (event){
            if ( $('#modal-'+itemNum).hasClass('disabled') ) {
                return false;}
            else {
                if (!$( event.target ).is('#wrapper-mid')) {   }
                else {
                    $('#modal-'+itemNum).slideToggle(
                        function(){
                            $('#modal-'+itemNum).addClass( "disabled" );
                        });
                    $('#modal-content-'+itemNum).empty();
                } 
            }
        });

В данном решении в моем коде страницы я по-прежнему использую нумерацию для похожих селекторов.
(modal-1, modal-2, и тд.).
Также теперь вижу, что есть повторяющиеся функции которые я мог бы объединить, например в функциях закрытия.
Сейчас буду пробовать вариант с traversing без всяких подстановок переменных.