Упрощение повторения кода jQuery

Question

Я установил модальный оверлей и имею этот код, который можно было бы упростить, я просто не знаю, как это сделать.

В теории будет более 6 блоков кода, поэтому в идеале это должно справиться с максимально возможным. Идентификаторы (от 1 до 6) генерируются динамически с использованием PHP.

jQuery(function ($) { 
// Load dialog on click 
$('.open-modal-overlay-1').click(function (e) { 
    $('#modal-overlay-1').modal(); 

    return false; 
}); 

$('.open-modal-overlay-2').click(function (e) { 
    $('#modal-overlay-2').modal(); 

    return false; 
}); 

$('.open-modal-overlay-3').click(function (e) { 
    $('#modal-overlay-3').modal(); 

    return false; 
}); 

$('.open-modal-overlay-4').click(function (e) { 
    $('#modal-overlay-4').modal(); 

    return false; 
}); 

$('.open-modal-overlay-5').click(function (e) { 
    $('#modal-overlay-5').modal(); 

    return false; 
}); 

$('.open-modal-overlay-6').click(function (e) { 
    $('#modal-overlay-6').modal(); 

    return false; 
}); 

}); 

Может ли кто-нибудь помочь?

Answer 1

Лучшая реализация зависит от того, какие факторы мы можем принять в отношении остальной части вашей разметки.

Можно ли считать, что у open-modal-overlay-* должен быть этот прослушиватель? Можно ли считать, что это класс только? В этом случае, мы могли бы сделать что-то вроде:

$('*[class^=open-modal-overlay-]').click(function() { 
    var id = $(this).attr('class').slice(-1); // last char of "class" attribute 
    $('#modal-overlay-'+id).modal(); 
}); 

Если мы не можем предположить, что это их единственный класс, то мы не можем использовать .attr('class') подобное, и мы не можем использовать «атрибут класса начинается с "селектор class^=. Если у всех их есть другой общий класс, уникальный для них, мы могли бы, возможно, лучше получить к ним доступ к $('.open-modal-overlay') (если, скажем, их атрибуты класса - class="open-modal-overlay open-modal-overlay-2" и т. Д.).

Если нет, то мы должны были бы использовать «атрибут класса содержит» селектор, class*=, или просто указать селекторы:

$('.open-modal-overlay-1, .open-modal-overlay-2, .open-modal-overlay-3, .open-modal-overlay-4, .open-modal-overlay-5, .open-modal-overlay-6').click(function() { 
    ... 
}); 

И мы не могли вывести id переменные, как, что, таким образом, мы «d должны сделать что-то вроде:

var id = $(this).attr('class').replace(/^.*open-modal-overlay-(\d+).*$/, '$1'); 

Answer 2

Как насчет:

$([1, 2, 3, 4, 5, 6]).each(function (i, e) { 
    $('.open-modal-overlay-' + e).click(function() { 
     $('#modal-overlay-' + e).modal(); 
     return false; 
    }) 
});