Как сделать код короче?

Question

[Magnus Keef]

Как можно сократить этот код?

$('#button1').hover(function () {
    $('#card1').fadeIn();
}, function () {
    $('#card1').fadeOut();
});
$('#button2').hover(function () {
    $('#card2').fadeIn();
}, function () {
    $('#card2').fadeOut();
});
$('#button3').hover(function () {
    $('#card3').fadeIn();
}, function () {
    $('#card3').fadeOut();
});

Answer 1

[0xD34F]

const getCard = button => $(`#card${button.id.match(/\d+/).pop()}`);

$('[id^="button"]').hover(
  e => getCard(e.target).fadeIn(),
  e => getCard(e.target).fadeOut(),
);

или

const $buttons = $('[id^=button]').hover(function(e) {
  this.eq($buttons.index(e.target))[e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut']();
}.bind($('[id^=card]')));

Answer 2

[mc21]

Вывести под css класс и в дата-атрибут

<button id="button3" class="js-card-fade" data-card-id="3"></button>
   <div class="js-card" data-id="3"></div>

$('.js-card-fade').hover(function () {
    $('.js-card[data-id=' + $(this).data('card-id')).fadeIn();
}, function () {
    $('.js-card[data-id=' + $(this).data('card-id')).fadeOut();
});

А вообще посмотреть бы вёрстку, там наверняка есть решение через $(someElement).closest().find();