0

Друзья, кто умеет писать правильно и красиво, подскажите как лучше писать такие вещи и от чего нужно отталкиваться при выборе решения. Допустим есть модальное окошко, там динамически формируется контент с кнопочками "btn1", "btn2", "btn3". Модальное окошко #modal, уже есть на странице и скрыто. Задача: прописать обработку клика на эти кнопочки. Лично я вижу два вариант и не пойму, что выбрать и на что нужно смотреть чтобы принять решение.

Вариант 1:

        $('#modal').on('click', '.btn1', function(e) {
            // Some action
        });

        $('#modal').on('click', '.btn2', function(e) {
            // Some action
        });

        $('#modal').on('click', '.btn3', function(e) {
            // Some action
        });

Не нравится: - Дублирование конструкции

Вариант 2:

$('#modal').on('click','.some-common-btn-class' ,function(e){
            var typeBtn = $(e.target).attr('some-unique-property');
            switch (typeBtn) {
                case 'type1':
                    // some action
                    break;
                case 'type2':
                    // some action
                    break;
                case 'type3':
                    // some action
                    break;
            }
        });

Не нравится: - Необходимость в дополнительном классе .some-common-btn-class - Логика принятия решения внутри обработчика

Вообщем у кого какие варианты, делитесь :)

3
  • А вот так не подойдет ? $('#modal').on('click', '.btn1', action1); $('#modal').on('click', '.btn2', action2); $('#modal').on('click', '.btn3', action3); function action1(e) { } function action2(e) { } function action3(e) { } если у вас actionы разные, то никак не получится не описывать их :) ещё момент, btn1,btn2,btn3 точно повторяются ? в смысле нельзя сделать их id ? это решило бы проблему в случае case.
    – zb'
    Commented 14 февр. 2014 в 9:50
  • Можно и id. C вынесенными обработчиками выглядит чуть красивее, согласен.
    – Ridzhi
    Commented 14 февр. 2014 в 10:02
  • с ID и case я бы лично не стал бы заморачиваться, т.к. описание этого будет ещё длиннее. лучше просто сделайте как я показал. это читается легко, и обработчики можно куда-нить задвинуть, чтобы не портили вид.
    – zb'
    Commented 14 февр. 2014 в 10:06

3 ответа 3

2

В javascript далеко не спец. Недавно начал знакомство. Поэтому решение может быть "корявым".
Хотелось бы услышать мнение других пользователей.

Раз класс блоков div, на которые нужно вешать событие отличается только цифрой, то:

/** 
 * Создаем массив функций для каждого div.
 * Тут я предположил, что нужны уникальные функции для каждого блока
 */

var func_list = [    
    function (el) {
        alert($(el).text() + ' 1');
    },
    function (el) {
        alert($(el).text() + ' 2');
    },
    function (el) {
        alert($(el).text() + ' 3');
    },
    function (el) {
        var n = $('div[class^=btn]').length + 1,
            btn = '<div class="btn' + n +'">new ' + n + '</div>';
        $('#modal').append(btn);
    },
    function (el) {
        alert('Hi there');
    }
];

/* Навешиваем функцию соответствующему ей блоку (по порядку) */

func_list.forEach(function (func, i) {
    var selector = 'div:nth-of-type(' + (i + 1) + ')';
    $('#modal').on('click', selector, function () {
        func(this);
    });
});
});

Посмотреть пример

6
  • @VenZell там же динамически добавляются эти кнопки, поэтому и стоит $('#modal').on() вот зацени с одним хэндлером jsfiddle.net/58d73/2
    – zb'
    Commented 14 февр. 2014 в 10:43
  • @eicto, исправил пример под динамическое добавление. Так лучше? Хотя, наверное, нет из-за двойного (по факту) цикла. Просто не хотелось повторяться.
    – VenZell
    Commented 14 февр. 2014 в 11:11
  • сойдет .
    – zb'
    Commented 14 февр. 2014 в 11:15
  • Я тоже не спец, но мне кажется завязывать алгоритм навешивания обработчиков на конкретной логике именования элементов совсем не круто.
    – Ridzhi
    Commented 14 февр. 2014 в 11:19
  • @Ridzhi, отвязал от именования.
    – VenZell
    Commented 14 февр. 2014 в 11:39
0

Свежий вариант, завязан на расширении jquery.

jQuery.fn.extend({
    onEventMap: function(eventMap) {
        for(var event in eventMap) {
            var handlers =  eventMap[event];
            for(var elem in handlers) {
                $(this).on(event, elem, handlers[elem]);
            }
        }
    }
});

Теперь можно писать так:

$('#modal').onEventMap({
    click: {
       '.btn1' : function(e) {
           // some actions
       },
       '.btn2' : function(e) {
           // some actions
       },
       '.btn3' : function(e) {
           // some actions
       },
    },
    mouseover: {
        '.somediv': function(e){
            // some action
        }
    }
});

Критика приветствуется.

-2

Чтобы не дублировать селекторы:

var modal = $('#modal');

Если одно, то так:

modal.find('.btn1, .btn2, .btn3').on('click', function(){
    alert(123);
});

Если разные, то так:

modal.find('.btn1').on('click', function() {
  alert(1);
});
modal.find('.btn2').on('click', function() {
  alert(2);
});
modal.find('.btn3').on('click', function() {
  alert(3);
});

Альтернативный вариант:

function bindAction(handler, type){
  modal.find(handler).on('click', function() {
    switch (type){
      case 1:
        alert(1);
        break;
      case 2:
        alert(2);
        break;
      case 3: 
        alert(3);
        break;
    }
  });
};

//вызов
bindAction('.btn1', 1);                     
bindAction('.btn2', 2); 
bindAction('.btn3', 3);

Демо

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.