1

以下は、私が使用しているコードです。現在、ドロップダウンから子の数量を選択すると、すべてうまく機能します。これまでのところ、必要な量を計算してから、変更時に隠しフィールドを更新します。正常に動作します。

私がやりたかったのは、この関数の外で、非表示フィールドの値で h3 タグを更新することでしたが、デフォルト値である 0 の値を取得し続けます。これの目的は、フォームが送信される前に、大人、子供、および oap の絶対合計を表示して、顧客が請求される金額を知る必要があることです。

HTML:

<select name="16a. Bronze Tour Package - Children £28" class="smalldropdown">
    <option selected="selected">Children £28</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<p id="bronzeChildTotalView">Child total is: £0</p>
<form>
    <input type="hidden" id="bronzeChildTotal" value="0">
    <input type="hidden" id="bronzeAdultTotal" value="0">
    <input type="hidden" id="bronzeOAPsTotal" value="0">
</form>
<h3 id="bronzeGrandTotal" class="h3margin">

jQuery:

$(document).ready(function () {
    var bronzeChild = $('select[name="16a. Bronze Tour Package - Children £28"]'),
        bronzeAdult = $('select[name="16b. Bronze Tour Package - Adults £35"]'),
        bronzeOAPs = $('select[name="16c. Bronze Tour Package - OAPs £28"]');

    bronzeChild.on('change', function () {
        var value = $(this).val();
        var result = $('#bronzeChildTotal');
        var resultView = $('#bronzeChildTotalView');
        if (bronzeChild[0].selectedIndex == 0) {
            alert('Choice cannot be ' + value + ' please choose a number of children');
        }
        var total = value * 28;
        var plural = '';
        if (value == 1) {
            plural = 'child';
        } else {
            plural = 'children';
        }

        if (isNaN(total)) {
            result.val(0);
            total = 0;
        } else {
            result.val(total);
            resultView.text('Child total is: £'+total);
        }
        resultView.text('Child total is: £'+total);
    });
    // This is the h3 tag that needs updating
    $('#bronzeGrandTotal').text($('#bronzeChildTotal').val());
});
4

1 に答える 1

2

イベント ハンドラーh3内のテキストを更新する必要があります。change

問題は、大人とオープも複数存在することです。合計を更新するには、各関数内でこれを実行する必要がありますか?

これに対応するには、更新ロジックを分離して、 3 つの要素すべてのハンドラーh3から呼び出すことができるようにする必要があります。これを試して：changeselect

bronzeChild.on('change', function () {
    var value = $(this).val();
    var result = $('#bronzeChildTotal');
    var resultView = $('#bronzeChildTotalView');
    if (bronzeChild[0].selectedIndex == 0) {
        alert('Choice cannot be ' + value + ' please choose a number of children');
    }
    var total = value * 28;
    var plural = '';
    if (value == 1) {
        plural = 'child';
    } else {
        plural = 'children';
    }

    if (isNaN(total)) {
        result.val(0);
        total = 0;
    } else {
        result.val(total);
        resultView.text('Child total is: £'+total);
    }
    resultView.text('Child total is: £'+total);


    // This is the h3 tag that needs updating
    updateGrandTotal();
});

var updateGrandTotal = function() {
    var childTotal = $('#bronzeChildTotal').val() || 0;
    var adultTotal = $('#bronzeAdultTotal').val() || 0;
    var oapTotal = $('#bronzeOAPsTotal').val() || 0;
    $('#bronzeGrandTotal').text(+childTotal + +adultTotal + +oapTotal);
};
于 2013-08-22T09:52:50.490 に答える