Как можно оптимизировать этот код?

Question

[Andrew Kolomiets]

Есть такой кусок кода

$('.buy7').on('click', function(){
    $('.bought7').fadeIn(600);
    $('.tovar7').val($('.h27').text());
    $(this).fadeOut();
});
$('.otmena7').on('click', function(){
    $('.bought7, this').fadeOut(600);
    $('.buy7').show();
});

$('.buy8').on('click', function(){
    $('.bought8').fadeIn(600);
    $('.tovar8').val($('.h28').text());
    $(this).fadeOut();
});
$('.otmena8').on('click', function(){
    $('.bought8, this').fadeOut(600);
    $('.buy8').show();
});

На сайте таких кнопок 8, как можно оптимизировать до единого шаблона для всех 8?

Comments

[Everybody_Lies]

Оберни повторяемую часть кода в функцию, где входными параметрами будет изменяемая часть

[WbICHA]

Запихнуть в функцию и передавать лишь класс?

[WbICHA]

otmena
tovar

Idealjno!

Answer 1

[Алексей Уколов]

Элементарный ведь цикл:

for (let i = 1; i<= 8; i++) {
  $('.buy' + i).on('click', function(){
      $('.bought' + i).fadeIn(600);
      $('.tovar' + i).val($('.h2' + i).text());
      $(this).fadeOut();
  });
  $('.otmena' + i).on('click', function(){
      $('.bought' + i + ', this').fadeOut(600);
      $('.buy' + i).show();
  });
}

Comments

[Andrew Kolomiets]

Просто никак не могу дальше заготовленных методов пройтись в обучение: то лень, то просто не понимаю, как оно устроено. Спасибо.

[Andrew Kolomiets]

До чего простая задача, до чего простое решение, а своей головой додумать не мог, стыдно даже. Но я учусь, набираюсь опыта.