-1

カテゴリに基づいて時間を送信するためのページを作成しようとしています。私の目標は、ユーザーが入力フィールドまたはドロップダウン メニューを変更するたびに、適切な合計を更新することです。

これまでの問題は、ユーザーがドロップダウン メニューでカテゴリを変更した場合に合計を減少/更新することです。新しい時間を追加しても問題ありません。

この問題を解決するためのより良い方法が100あるかもしれませんが、私はこれにかなり慣れていません。

どんなポインタでも大歓迎です！

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 に答える