Как сократить jQuery?

196

17 августа 2018, 22:00

Возможно ли как-то сократить данную функцию? Выглядит ужасно, особенно когда попапов более десяти :(

$(function() {
  $(“#button-1").on("click", function() {
    $.popup(“popup-1").open();
  });
  $(“#button-2").on("click", function() {
    $.popup(“popup-2").open();
  });
  $(“#button-3").on("click", function() {
    $.popup("popup-3").open();
  });
  $(“#button-4").on("click", function() {
    $.popup("popup-4").open();
  });
  $(“#button-5").on("click", function() {
    $.popup("popup-5").open();
  })
});

Answer 1

$('[id^="button-"]').on("click", function() {
  var parts = this.id.split('-');
  $.popup("popup-" + parts[1]).open();
});

P.S. Исправьте открывающие двойные кавычки в селекторах.

Answer 2

Могу предложить такой вариант. Задайте всем кнопкам общий класс, например "button-popup", это позволит обойтись одним click на все кнопки. Для привязки копки к попапу можно использовать data атрибуты. Например data-popup-id.

Тогда код будет следующий

$(function() { 
  $('.button-popup').click(function(){ 
    var popup_id = $(this).data('popup-id'); 
    $.popup('popup-' + popup_id).open(); 
  }); 
});