Упростите повторяющийся код jQuery - PullRequest
Новая
       11

Упростите повторяющийся код jQuery

2 голосов
/ 28 марта 2012

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

Теоретически будет более 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;
});

});

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

Ответы [ 2 ]

3 голосов
/ 28 марта 2012

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

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

$('*[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 таким образом, поэтому нам нужно сделать что-то вроде: 

var id = $(this).attr('class').replace(/^.*open-modal-overlay-(\d+).*$/, '$1');
0 голосов
/ 28 марта 2012

Как насчет: 

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