Вот, пока придумал такое решение. Но начал я его делать до комментария 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 без всяких подстановок переменных.
