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

Question

[r_g_b_a]

Подскажите, как оптимизировать код, чтобы не создавать для каждой кнопки свой обработчик?
Демо

Answer 1

[nvdfxx]

(function() {
  const initialStates = {
    '.button_1': false,
    '.button_2': true,
    '.button_3': false
  }
  
  $('.button').on('click', function() {
    $(this).toggleClass('button_active')
  })
  
  for(key in initialStates) {
    if(initialStates[key]) $(key).click()
  }
  
})();

Comments

[nvdfxx]

Rerurk, вы вопрос читали, демку смотрели? При чем тут вообще вес jquery?

[Rerurk]

nvdfxx, ой пардон краша уже едет

Answer 2

[Higrok]

Например, вот так:

var button1Active = false;
  var button2Active = true;
  var button3Active = false;

function buttonActive(btn_name, btn_active) {
   $(btn_name).on('click', function(){
    btn_active = !btn_active;
    $(this).toggleClass('button_active', button1Active);
  }).toggleClass('button_active', button1Active);
}

buttonActive('.button_1', button1Active);
buttonActive('.button_2', button2Active);
buttonActive('.button_3', button3Active);

Comments

[r_g_b_a]

А есть вариант еще сократить количество обработчиков, использовав делегирование событий?

$('.container').on('click', '.button', function(){})