Javascript / jQuery - 具有多个字段的时区更改脚本

时间:2012-05-23 13:16:56

标签: javascript jquery

我使用下拉菜单编写了一个用于更改网站字段“时区”的javascript。

您可以在此处查看脚本:http://jsfiddle.net/dTb76/14/

但是,我已经达到了我知道怎么做的极限 - 我需要脚本来修改几个“时间”字段,但是,目前它只能用于一个字段。

我一直在努力弄清楚几天会有什么变化,但是我没有太多运气。我能说的最好,我需要某种“foreach”语句,告诉它存储每个字段的原始时间,然后通过select中选择的任何内容修改它,但是我不知道如何在jQuery / javascript中实现它

非常感谢帮助。

2 个答案:

答案 0 :(得分:1)

您需要使用jQuery的each()方法来遍历每个.time元素。这将允许您获取每个特定元素的当前时间,并按元素进行计算;否则,$('.time').text()之类的东西将始终返回所选第一个元素的值,这就是你所看到的。

这应该让你开始:

    $('#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');
             }                    
        });            
    });

答案 1 :(得分:1)

您只需使用$.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');
        }                
    });        
});​

修改

要检索每个字段的“原始时间”,您可以执行以下操作:

    var times = $('.time');

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

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