Javascript/jQuery - Timezone Change Script with Multiple Fields

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.

Glauco Vinicius · Accepted Answer · 2012-05-23 16:22:08Z

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

edited May 23, 2012 at 16:22

answered May 23, 2012 at 13:46

Glauco Vinicius

2,6653 gold badges25 silver badges37 bronze badges

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

4 Comments

Zach Nicodemous Over a year ago

The each function seems to break the original functionality. If you fork my jsFiddle and test it, you will see. It seems to break the storing of the original value, so that each time you change the +/- on the select, its relative to the current value and not the original one. How would I work around that?

Glauco Vinicius Over a year ago

Zach, my code stores the 'original time' on the element it belongs. So that, you could retrieve it without a problem. If you need some help with that, tell me.

Zach Nicodemous Over a year ago

I would appreciate some help yes. Could you demonstrate on jsFiddle? Am trying to learn all of this, but sometimes it can be hard to grasp.

Glauco Vinicius Over a year ago

Zach, I edited my answer to show how you could retrieve every 'original time'.

ajm · Accepted Answer · 2012-05-23 13:46:07Z

You'll want to use jQuery's each() method to iterate through each of your .time elements. This will allow you to grab the current time for each specific element and do your calculations on a per-element basis; otherwise, $('.time').text() and things like that will always return the value of the first element selected, which is what you're seeing.

This should get you started:

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

        var modifyBy = parseInt($(this).val(),10);  // Here, this refers to your select element, the element whose change event handler we're now in

        $('.time').each(function(){ // each() iterates through each .time element found in the DOM individually; that's what you'd like to do
            var $this = $(this), // Refers to the current .time element
                curTime = $this.text(),
                curTimeHH = parseInt(curTime.split(':')[0],10),
                curTimeHH = parseInt(curTime,10) + modifyBy;                

            $this.attr('originalTime',curTime);
            if (curTimeHH == 0) {
                $this.text('24:00');
            } else if (curTimeHH > 24) { 
                 curTimeHH = curTimeHH - 24;
                 $this.text('0'+curTimeHH + ':00');
            } else if (curTimeHH < 0) {
                curTimeHH = curTimeHH + 24;
                $this.text(curTimeHH + ':00');
            } else { 
            $this.text(curTimeHH + ':00');
             }                    
        });            
    });

Collectives™ on Stack Overflow

Javascript/jQuery - Timezone Change Script with Multiple Fields

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related