Question

我在顶部有一个文本框，显示总持续时间。现在发生的事情是用户从时间戳中选择一个持续时间，这将显示在文本框中，然后将其添加到新行中。现在我的情况是文本框的格式就像这样的“00小时00分00秒”。

因此，例如，如果剩余的总持续时间为01小时30分20秒，并且如果您从时间戳选择00小时40分钟00秒（您使用时间戳滑块选择您的持续时间，然后单击确定并显示值在文本框中），然后将其添加到一个新行，然后01小时30分钟20秒应减去00小时40分钟00秒，使00小时50分钟20秒。

问题是当我添加一个选定持续时间的行时，它不会改变剩余的总持续时间。有谁知道这是为什么？

我正在使用的live（）方法没有问题（即使我将来将其更改为on），我相信问题是我在jquery中的计算，但我不确定。

下面是小提琴中的代码（这不显示时间戳，这个jsfiddle在这里显示代码的样子以及如何添加新行）。

http://jsfiddle.net/7JWVJ/5/

我有一个正常工作的应用程序，它非常类似于我想对此应用程序执行的操作，但它在文本框中使用普通数字。这是在下面的小提琴。只需打开小提琴并输入文本框中的数字，单击“添加”按钮，它将删除您从100输入的数字。编辑您添加到不同数字的行，然后再次查看计算工作。以下是小提琴的正常数字，而持续时间的格式为“00小时00分00秒，这是两者之间的主要区别

http://jsfiddle.net/uThKQ/25/

Answer 1

好的，你去吧:(代码可以使用更多优化，但这有效）

    var duration = '01 Hrs 30 Mins 20 Secs';



$(document).ready(function(){

    $('#total-duration').html(duration);

    $(function() {  
        $('#questiondurationpicker').trenttimepicker({
            timeFormat:'hh mm ss',
            hourGrid: 4,
            minuteGrid: 10,
            secondGrid: 10,
            showOn: 'button',
            buttonImage: "Images/clock.gif",
            buttonImageOnly: true
        });        
    });

    $(".questiondurationpickerRow").live("change", calculateDuration);
    $("#addQuestionBtn").live("click", calculateDuration);
});



function insertQuestion(form) {      
    var $tr = $("<tr></tr>");
    var $duration = $("<td class='duration'></td>");

    $('#questiondurationpicker').each( function() {
        var $this = $(this);
        var $durationText = $("<input type='text' class='questiondurationpickerRow' readonly='readonly' />").attr('name',$this.attr('name')).attr('value',$this.val())
        $duration.append($durationText);
    });

    $tr.append($duration);
    $('#qandatbl').append($tr);

    $('.questiondurationpickerRow').trenttimepicker({
        timeFormat:'hh mm ss',
        hourGrid: 4,
        minuteGrid: 10,
        secondGrid: 10,
        showOn: 'button',
        buttonImage: "Images/clock.gif",
        buttonImageOnly: true
    });
}

var format = duration.match(/(\d\d)/ig),
hours = parseInt(format[0], 10),
mins = parseInt(format[1], 10),
secs = parseInt(format[2], 10);

function calculateDuration()
{
    var totalduration = duration;  
    var sign = '';
    var tmp_hours = 0;
    var tmp_mins = 0;
    var tmp_secs = 0;

    $("#qandatbl td.duration input").each(function (){
        tmp_format = $(this).val().match(/(\d\d)/ig),
        tmp_hours += parseInt(tmp_format[0], 10),
        tmp_mins += parseInt(tmp_format[1], 10),
        tmp_secs += parseInt(tmp_format[2], 10);

    });

    newH = hours - tmp_hours;
    newM = mins - tmp_mins;
    newS = secs - tmp_secs;

    if( newS < 0 ) {
        newS += 60;
        newM--;
    }
    if( newM < 0 ) {
        newM += 60;
        newH--;
    }       

    if(newH < 0) {
        newH = tmp_hours - hours;
        newM = tmp_mins - mins;
        newS = tmp_secs - secs;
        if( newS < 0 ) {
            newS += 60;
            newM--;
        }
        if( newM < 0 ) {
            newM += 60;
            newH--;
        }       
        sign = '- ';
    }       

    checkedH = (newH < 10 ? '0' : '') + newH;
    checkedM = (newM < 10 ? '0' : '') + newM;
    checkedS = (newS < 10 ? '0' : '') + newS;

    new_duration = sign + checkedH + ' Hrs ' + checkedM + ' Mins ' + checkedS + ' Secs';


    $("#total-duration").text(new_duration);

}

添加新行时，总持续时间值应该更改，但不会

1 个答案: