Question

以下是我正在使用的代码。目前，当您从下拉列表中选择子数量时，它们都能很好地工作。到目前为止，它计算它应该是多少，然后在更改时更新隐藏字段;工作正常。

我想要做的就是在这个函数之外，用隐藏字段的值更新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());
});

Answer 1

您需要更新h3事件处理程序中的change文本。

问题是会有不止一个，也会有成人和小跑。我是否必须在每个函数中运行它来更新总数？

为了满足这一需求，您应该将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);
};

使用jQuery不会使用隐藏字段值更新H3标记

1 个答案: