Best way to combine identical parts of code

Question

Below is my code I've developed some time ago. Everything works fine, but I think it'd be better to combine the code parts. Unfortunately, I'm not an expert in JavaScript yet so can't understand how to improve the combining. Much appreciate any help & advice:

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");
});

You can try to navigate to nearby elements to do this but we will need sample markup to help. Also, you are setting change functions for `jQuery('#select')` twice — Rajesh, May 04 '20 at 09:09
But it's a bit hard to see what you're trying to do as you always hide (eg .price) and never show it and there appears to be only two `select`s for 4 "options"? So you could probably combine it all into 3-4 lines using `$(".price,.button,.price-2,.button-2").hide()` etc — freedomn-m, May 04 '20 at 09:26

deadcoder0904 · Accepted Answer · 2020-05-04T09:59:43.457

2

You can use $ instead of jQuery. Then take the common function out like:

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') });

edited May 04 '20 at 09:59

answered May 04 '20 at 09:11

deadcoder0904

7,232
12
66
163

FYI `jQuery` is better over `$` as many libraries use `$` as symbol and that can cause issues. Using `jQuery` is more specific and more reliable. For more info refer: https://stackoverflow.com/questions/2212602/versus-jquery – Rajesh May 04 '20 at 09:15
then probably they can wrap it in a IFFE. moreover `$` is widely-known for `jQuery` than any other library. Those libraries might be using jQuery as a dependency. – deadcoder0904 May 04 '20 at 09:16
Why are you wrapping the call inside `$()`? as in `$(myFunc(args))`? It does nothing as it will call myFunc immediately and return the result (null) to doc.ready. – freedomn-m May 04 '20 at 09:21
@freedomn-m If i remember, `$()` was a shorthand for `$(document).ready()`. Having a function is always better as you can call it on your own – Rajesh May 04 '20 at 09:24
Yes, doc.ready, as I stated. You do `$(myFunc)` but if you do `$(myFunc())` then it's the same as `var x = myFunc(); $(x)` - which is clearly pants! :) – freedomn-m May 04 '20 at 09:26
@freedomn-m haven't tested it. since i'd need a sample but i just took out the code from inside `$()` & put it up in a `function`. if i do `$(myFunc)`, how would i pass the args? – deadcoder0904 May 04 '20 at 09:27
That's my point. OPs code does `$(func() { })` - ie puts a function inside the call, your code calls the function first (*before doc.ready fires*) - the equivalent would be `$(function() { myFunc(args) })` – freedomn-m May 04 '20 at 09:35
To be clear, I'm not disagreeing with the use of a function and calling it with arguments - that's a distinct advantage over OPs code. – freedomn-m May 04 '20 at 09:37
@freedomn-m yep i thought of the same after you commented. i made appropriate changes :) – deadcoder0904 May 04 '20 at 09:58

Best way to combine identical parts of code

1 Answers1