Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I am trying to write a generic javascript subroutine to set the periodicity in the week:

var items = {"0": "none", "1":"Daily", "2": "Every weekday (Monday to Friday)", "3": "Weekly"};

I wrote the following module, but I would like to improve it, making it more generic and readable if it is possible.

So my questions are:
1) How can I ameliorate this piece of code?
2) How can make a callback in order to make something like this:

var callback = selectDay(idValue);​
createSelect(items, idValue, callback);

var createSelect = function (items, idValue) {
    var selElem = document.createElement("select");
    $.each(items, function (key, value) {
        var ov = document.createElement("option");
        ov.value = key;
        ov.appendChild(document.createTextNode(value));
        selElem.appendChild(ov);
    });
    $(idValue).prepend(selElem);
};

var selectDay = function (idValue, element) {
    var element = $(idValue);
    var childElements = idValue + '_';
    element.find('select').change(function () {
        if($(this).val() === '0') {
            element.find('label').hide();
            $(this).closest('div').find('input').attr("checked", false);
        }
        if($(this).val() === '1') {
            element.find('label').hide();
            $(this).closest('div').find('input').attr("checked", true);
        }
        if($(this).val() === '2') {
            element.find('label').show();
            for (var i = 0; i < 5; i += 1) {
                $(childElements + i).attr("checked", true);
            }
            for (var i = 5; i < 7; i += 1) {
                $(childElements + i).attr("checked", false);
            }
        }
        if($(this).val() === '3') {
            element.find('label').show();
            $(this).closest('div').find('input').attr("checked", false);
            $(childElements + (new Date()).getDay()).attr("checked", true);
        }
    });
};

var items = {"0": "none", "1":"Daily", "2": "Every weekday (Monday to Friday)", "3": "Weekly"};
var idValue = '#contest_data_updatePeriodicity_days';
createSelect(items, idValue);
selectDay(idValue);​

Here is my demo http://jsfiddle.net/D2RLR/2634/

share|improve this question
add comment

1 Answer

  1. Use prop() instead of attr().
  2. See the first point.
  3. You're declaring var selectDay = function(idValue, element), your element argument is probably a typo? You don't need it.
  4. See the first point.
  5. Use switch instead of all those if. Or at least cache the $(this).val() result.
  6. See the first point.
  7. You don't need element.find(), you could use the context (somehow cleaner).

Overall, here is some code to give you the idea:

var selectDay = function (idValue) {
    $('select', idValue).change(function() {
        switch ($(this).val()) {
            case '0':
                $('label', idValue).hide();

                // Use prop(), not attr().
                $(this).closest('div').find('input').prop('checked', true);
                break;
        }
    });
};

Now you may notice something: this doesn't have exactly the same behavior as your code. Guess why :-)

A friend of mine says that whenever you use a switch case, you can actually use a mapping object. This might be another way to do it. The mapping object would be something like:

var mapping = {
    '0': {
        'label': 'hide',
        'checked': false
    },
    '1': {
        'label': 'hide',
        'checked': true
    }
};

And then you code accordingly to this object.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.