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

问题是会有不止一个，还会有成年人和 oaps。我必须在每个函数中运行它来更新总数吗？

为了满足这一点，您应该分离出h3更新逻辑，以便您可以从change处理程序中为所有三个select元素调用它。尝试这个：

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 回答