How to optimize this javascript duplicates

Question

I wrote this code, but since I'm just starting to learn JS, can't figure out the best way to optimize this code. So made a duplicates for every if statement.

$(function() {
    var lang = $(".lang input[type='checkbox']");
    var gender = $(".gender input[type='checkbox']");
    if(lang.length == lang.filter(":checked").length){
        $('.lang').hide();
        $('.lang-all').click(function(){
            $('.lang-all').hide();
            $('.lang').slideToggle(200);
        });
    } else {
        $('.lang').show();
        $('.lang-all').hide();
    }

    if(gender.length == gender.filter(":checked").length){
        $('.gender').hide();
        $('.gender-all').click(function(){
            $('.gender-all').hide();
            $('.gender').slideToggle(200);
        });
    } else {
        $('.gender').show();
        $('.gender-all').hide();
    }
});

So this is my code, as you can see on line 15 if(gender... I have a duplicate of previous code, just changed variable from "lang" to "gender". Since I have more that two variables, I don't want to make duplicate of code for every each of them, so I hope there is a solution to optimize it.

Try writing a function that takes the class name as a parameter. Then call it once with "lang" and once with "gender". — Bergi
– Bergi, Commented Apr 20, 2016 at 11:31

Marvin Medeiros · Accepted Answer · 2016-04-20 11:36:10Z

4

You can write a function to let your code more abstract, see:

function isChecked(obj, jq1, jq2){
    if(obj.length == obj.filter(":checked").length){
        jq1.hide();
        jq2.click(function(){
            jq2.hide();
            jq1.slideToggle(200);
        });
    } else {
        jq1.show();
        jq2.hide();
    }
}

//Your jQuery code, more abstract
$(function() {
    var lang = $(".lang input[type='checkbox']");
    var gender = $(".gender input[type='checkbox']");

    isChecked(lang, $('.lang'), $('.lang-all'));
    isChecked(gender, $('.gender'), $('.gender-all'));
});

answered Apr 20, 2016 at 11:36

Marvin Medeiros

2425 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nisar · Accepted Answer · 2016-04-20 11:48:18Z

2

make a function which had similar functionality, then pass a parameter as a class or id

$(function() {
call('.lang');
call('.gender');
function call(langp){
var lang = $(langp+" input[type='checkbox']");
    if(lang.length == lang.filter(":checked").length){
        $(langp).hide();
        $(langp+'-all').click(function(){
            $(langp+'-all').hide();
            $(langp).slideToggle(200);
        });
    } else {
        $(langp).show();
        $(langp+'-all').hide();
    }
}

});

edited Apr 20, 2016 at 11:48

answered Apr 20, 2016 at 11:37

nisar

1,0752 gold badges11 silver badges26 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

It wasn't me, but I can see why this wouldn't work... var lang = $(langp+"input[type='checkbox']"); - there is no .langinput[type='checkbox'] or .genderinput[type='checkbox']

Reinstate Monica Cellio Over a year ago

No worries - a simple mistake :)

Collectives™ on Stack Overflow

How to optimize this javascript duplicates

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related