-1

我正在尝试创建一个页面以根据类别提交小时数。我的目标是在用户更改输入字段或下拉菜单时更新适当的总和。

到目前为止，我的问题是如果用户更改下拉菜单中的类别，则使总和减少/更新。添加新时间可以正常工作。

也可能有一百种更好的方法来解决这个问题，但我对此很陌生。

任何指针将不胜感激！

jsFiddle在某种程度上工作......

到目前为止我所拥有的：HTML

<form id="houre">
<input type="text" class="houre-field alpha foo Dagtid" name="timer" placeholder="Timer" value="" />
<select class="type-field omega fii" name="type">
    <option value="Dagtid">Dagtid</option>
    <option value="Vakt">Vakt</option>
    <option value="Femti">50 %</option>
    <option value="Hundre">100 %</option>
</select>
</form>
<table>
<tr>
    <td>Dagtid</td>
    <td><span id="h-total">0 t</span>

    </td>
</tr>
<tr>
    <td>50 %</td>
    <td><span id="femti-total">0 t</span>

    </td>
</tr>
<tr>
    <td>100 %</td>
    <td><span id="hundre-total">0 t</span>

    </td>
</tr>
<tr>
    <td>Vakt</td>
    <td><span id="vakt-total">0 t</span>

    </td>
</tr>
</table>

jQuery

$(function () {
var previous;
$('.fii').focus(function () {
previous = $(this).val();
});

$('#houre').on('change', '.fii', function () {
var category = $(this).val();
$(this).prev('.foo').addClass(category);
$(this).prev('.foo').removeClass(previous);
previous = $(this).val();
});

$('#houre').on('change', '.foo, .fii', function () {
var sum = 0;

$('.Dagtid').each(function () {
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;

    $('#h-total').text(sum + (" t"));

});

$('.Femti').each(function () {
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;

    $('#femti-total').text(sum + (" t"));

});

$('.Hundre').each(function () {
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;

    $('#hundre-total').text(sum + (" t"));

});

$('.Vakt').each(function () {
    var value = Number($(this).val());
    if (!isNaN(value)) sum += value;

    $('#vakt-total').text(sum + (" t"));

});


});
});
4

1 回答 1

0

我会创建一个函数来计算所有总数并更新 HTML 中的文本，并在输入或选择值发生更改时调用它：

function updateTotals() {
    var totalDagtid = 0,
        totalFemti = 0,
        totalHundre = 0,
        totalVakt = 0;
    $('.houre-field').each(function () {  
        //Check if value is a number
        var hours = parseInt($(this).val())? parseInt($(this).val()) : 0;
        //add hours to corresponding variable i.e.:totalDagtid += hours;
        eval('total' + $(this).next('.type-field').val() + '+=' + hours);
    });

    $('#h-total').html(totalDagtid + 't');
    $('#femti-total').html(totalFemti + 't');
    $('#total-total').html(totalHundre + 't');
    $('#vakt-total').html(totalVakt + 't');
}


$('#houre').on('change', '.foo, .fii', function () {
    updateTotals();
});

示例小提琴

于 2013-07-19T23:32:27.687 回答