Лучший способ объединить идентичные части кода

Question

Ниже мой код, который я разработал некоторое время go. Все работает отлично, но я думаю, что было бы лучше объединить части кода. К сожалению, я пока не эксперт по JavaScript, поэтому не могу понять, как улучшить комбинирование. Очень ценю любую помощь и совет:

jQuery(function() {
    jQuery('.price').hide();
    jQuery('.d2').show();
    jQuery('#select').on("change", function() {
        jQuery('.price').hide();
        jQuery('.d' + jQuery(this).val()).show();
    }).val("2");
});
jQuery(function() {
    jQuery('.button').hide();
    jQuery('.b2').show();
    jQuery('#select').on("change", function() {
        jQuery('.button').hide();
        jQuery('.b' + jQuery(this).val()).show();
    }).val("2");
});
jQuery(function() {
    jQuery('.price-2').hide();
    jQuery('.e2').show();
    jQuery('#select-2').on("change", function() {
        jQuery('.price-2').hide();
        jQuery('.e' + jQuery(this).val()).show();
    }).val("2");
});
jQuery(function() {
    jQuery('.button-2').hide();
    jQuery('.c2').show();
    jQuery('#select-2').on("change", function() {
        jQuery('.button-2').hide();
        jQuery('.c' + jQuery(this).val()).show();
    }).val("2");
});

Answer 1

Вы можете использовать $ вместо jQuery. Затем возьмите общую функцию, например:

function myFunc($hide, $show, $select) {
    $($hide).hide();
    $($show + '2').show();
    $($select).on("change", function() {
                    $($hide).hide();
                    $($show + $(this).val()).show();
    }).val("2");
}

$(function() { myFunc('.price', '.d', '#select') });
$(function() { myFunc('.button', '.b', '#select') });
$(function() { myFunc('.price-2', '.e', '#select-2') });
$(function() { myFunc('.button-2', '.c', '#select-2') });