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'
    14 фев 2014 в 9:50
  • Можно и id. C вынесенными обработчиками выглядит чуть красивее, согласен.
    – Ridzhi
    14 фев 2014 в 10:02
  • с ID и case я бы лично не стал бы заморачиваться, т.к. описание этого будет ещё длиннее. лучше просто сделайте как я показал. это читается легко, и обработчики можно куда-нить задвинуть, чтобы не портили вид.
    – zb'
    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'
    14 фев 2014 в 10:43
  • @eicto, исправил пример под динамическое добавление. Так лучше? Хотя, наверное, нет из-за двойного (по факту) цикла. Просто не хотелось повторяться.
    – VenZell
    14 фев 2014 в 11:11
  • сойдет .
    – zb'
    14 фев 2014 в 11:15
  • Я тоже не спец, но мне кажется завязывать алгоритм навешивания обработчиков на конкретной логике именования элементов совсем не круто.
    – Ridzhi
    14 фев 2014 в 11:19
  • @Ridzhi, отвязал от именования.
    – VenZell
    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);

Демо

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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