Question

我正在尝试创建一个基于类别提交小时的页面。我的目标是在用户对输入字段或下拉菜单进行更改时，更新相应的总和。

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

也可能有一百种方法可以更好地解决这个问题，但我对此很新。

任何指针都将非常感谢！

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"));

});


});
});

Answer 1

我会创建一个函数来计算所有总数并更新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();
});

<强> Example fiddle

如何根据选定的下拉值更新总字段 - jquery？

1 个答案: