javascript - dry - nested if statement

Question

I am new to coding, but have been reading about DRY - Don't Repeat Yourself.

I have a JavaScript if/else statement that does not fit the DRY approach, but I am unable to workout how to write the JavaScript if/else statement so that the contents are not repeated.

I am hoping some one smarter than me can show me.

Here is my code:

    {% if user.get_profile.subscription_category == '00' %}

        $('#id_name_details_prefix_title').addClass('kmw-disabled');

        $('#id_name_details_first_name').addClass('kmw-disabled');

        $('#id_name_details_middle_name').addClass('kmw-disabled');

        $('#id_name_details_last_name').addClass('kmw-disabled');

        $('#id_name_details_suffix_title').addClass('kmw-disabled');

    {% else %}

        {% if user.get_profile.display_virtual_keyboard %}

            $('#id_name_details_prefix_title').removeClass('kmw-disabled');

            $('#id_name_details_first_name').removeClass('kmw-disabled');

            $('#id_name_details_middle_name').removeClass('kmw-disabled');

            $('#id_name_details_last_name').removeClass('kmw-disabled');

            $('#id_name_details_suffix_title').removeClass('kmw-disabled');

        {% else %}

            $('#id_name_details_prefix_title').addClass('kmw-disabled');

            $('#id_name_details_first_name').addClass('kmw-disabled');

            $('#id_name_details_middle_name').addClass('kmw-disabled');

            $('#id_name_details_last_name').addClass('kmw-disabled');

            $('#id_name_details_suffix_title').addClass('kmw-disabled');

        {% endif %}

    {% endif %}

The contents of the 1st if are repeated in the else of the 2nd if statement - I am hoping that I only have to write the repeated contents once.

That's not JavaScript. Are you generating the code on the server or is that some kind of templating language? Anyway, this might be a better question for Code Review. — JJJ
– JJJ, Commented Dec 26, 2014 at 8:30
oh yeah - its django template language but in js, however the dry principle is the same. — user4307426
– user4307426, Commented Dec 26, 2014 at 8:31

giannisf · Accepted Answer · 2014-12-26 08:31:42Z

3

You can put your selectors in an array

var selectors = [#id_name_details_prefix_title', '#id_name_details_first_name' ...];

and then add/remove class

$(selectors.join(',')).addClass('kmw-disabled')

answered Dec 26, 2014 at 8:31

giannisf

2,6091 gold badge20 silver badges35 bronze badges

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

Comments

Henrik Andersson · Accepted Answer · 2014-12-26 08:40:15Z

Break it up into functions that isolate what's going on.

{% if something %}
    functionThathAddsClass();
{% else %}
    {% if something_else %}
        functionThatRemovesClass();
    {% else %}
        functionThathAddsClass();
    {% endif %}
{% endif %}

You will run into the problem of creating two global functions in this case, but that's a different issue.

I like to make, what I personally call, CSS Guards. A CSS Guard is basically just an object that has functions that pokes and prods at the DOM.

var NameDetailsGuard = {
    functionThathAddsClass = function () {
        $('#id_name_details_prefix_title').addClass('kmw-disabled');
        $('#id_name_details_first_name').addClass('kmw-disabled');
    },
    functionThatRemovesClass = function () {
        $('#id_name_details_prefix_title').removeClass('kmw-disabled');
        $('#id_name_details_first_name').removeClass('kmw-disabled');
    }
};

and you use it like this

NameDetailsGuard.functionThatAddsClass();

An added benefit to this is that if you expand on this concept you can start doing simpler DOM node caching within this object so that instead of querying for the selector everytime you'll retain a reference to it and manipulate that.

n1k1ch · Accepted Answer · 2014-12-26 08:51:52Z

0

You can add some class to needed elements (in HTML markup) and select by that class.

For example, add category-zero and virtual-keyboard classes and use following:

{% if user.get_profile.subscription_category == '00' %}

    $('.category-zero').addClass('kmw-disabled');

{% else %}

    {% if user.get_profile.display_virtual_keyboard %}

        $('.virtual-keyboard').removeClass('kmw-disabled');

    {% else %}

        $('.virtual-keyboard').addClass('kmw-disabled');

    {% endif %}

{% endif %}

edited Dec 26, 2014 at 8:51

answered Dec 26, 2014 at 8:42

n1k1ch

2,7123 gold badges33 silver badges35 bronze badges

Collectives™ on Stack Overflow

javascript - dry - nested if statement

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related