Question

I have written a javascript for changing the “timezone” of a field on my website using a dropdown select menu.

You can see the script here: http://jsfiddle.net/dTb76/14/

However, I have reached the limits of what I know how to do – I need the script to modify several “time” fields, however, at the moment it can only work with one field.

I’ve been trying to figure out what changes to make for days, however I have not been having much luck. Best I can tell, I need some kind of “foreach” statement, telling it to store the original time for each field and then modify it by whatever is selected in the select, however I am not sure how to implement that in jQuery/javascript.

Would appreciate help.

Answer 1

You just need to use $.each JQuery function:

$('#modTime').change(function() {

    var times = $('.time');

    $.each(times, function(index, value) {

        var curTime = $(value).text();

        curTimeHH = parseInt(curTime.split(':')[0],10);

        $(value).attr('originalTime', curTime);

        var modifyBy = parseInt($('#modTime').val(),10);

        curTimeHH = parseInt(curTime,10) + modifyBy;

        if (curTimeHH === 0) {
            $(value).text('24:00');
        } else if (curTimeHH > 24) { 
            curTimeHH = curTimeHH - 24;
            $(value).text('0'+curTimeHH + ':00');
        } else if (curTimeHH < 0) {
            curTimeHH = curTimeHH + 24;
            $(value).text(curTimeHH + ':00');
        } else { 
            $(value).text(curTimeHH + ':00');
        }                
    });        
});​

Edit:

To retrieve the ‘original time’ of every field, you could do something like:

    var times = $('.time');

    $.each(times, function(index, value) {

        var originalTime = $(value).attr('originalTime');
        ...
    });