javascript - 对更改不同事件时的两个值求和

Question

我想知道如何从 2 个不同的 .on('change') 中求和。例如我有这个:

$('.AdultsField').on('change', function () {
    console.log($(this).val());       
    //document.getElementById("personasFiltroTop").innerHTML = JSON.stringify(this.value);
});

还有这个:

$('.ChildsField').on('change', function () {
    console.log($(this).val());
    //document.getElementById("personasFiltroTop").innerHTML = JSON.stringify(this.value);
});

所以我想对这2个值进行加法运算，然后将结果保留在其他变量中以绑定(bind)到另一个Id或类，这是我尝试过的:

$(document).ready(function () {
    $(document).on('change', '.AdulstField.ChildsField', function () {
        var number = parseInt($(".AdulstField").val()) + parseInt($(".AdulstField").val());
        $('#totalNumPersonas').val(number);
    });
});

我在这里尝试的是同时聆听和分配......这里更多相同:

$(document).on("change", ".AdulstField.ChildsField", function () {
    var sumPersonas = 0;
    $(".AdulstField.ChildsField").each(function () {
        sumPersonas += +$(this).val();
    });
    $("#totalNumPersonas").val(sumPersonas);
    document.getElementById("totalNumPersonas").innerHTML = JSON.stringify(this.value);
});

这是我的 html:

<div class="form-group">
    <label class="control-label col-md-6">Adultos</label>
    <div class="col-md-6">
        @Html.Select(cssClass: "form-control AdultsField", defaultValue: 2, minValue: 1, maxValue: 10)
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-6">Niños</label>
    <div class="col-md-6">
        @Html.Select(cssClass: "form-control SelectChildren ChildsField", defaultValue: 0, minValue: 0, maxValue: 6)
    </div>
</div>

并渲染这个(不习惯.net的人不用担心):

那么我如何能够将它们放入一个元素中:总 Angular 色:成人+ child

非常感谢!!

Answer 1

您的代码遵循正确的想法，只有两个问题。首先，当在单个对象中使用多个单独的选择器时，您需要用逗号分隔它们。其次，第一个 select 上的类似乎是 AmountField，而不是 AdultsField(或拼写错误 AdulstField)。试试这个:

jQuery(function($) {
  $(document).on('change', '.AmountField, .ChildsField', function() {
    var number = (parseInt($(".AmountField").val(), 10) || 0) + (parseInt($(".ChildsField").val(), 10) || 0);
    $('#totalNumPersonas').val(number);
  });
});

这是一个完整的工作示例:

jQuery(function($) {
  $(document).on('change', '.AmountField, .ChildsField', function() {
    var number = (parseInt($(".AmountField").val(), 10) || 0) + (parseInt($(".ChildsField").val(), 10) || 0);
    $('#totalNumPersonas').val(number);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control AmountField">
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<select class="form-control SelectChildren ChildsField">
  <option selected="selected" value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>
<input type="text" readonly="true" id="totalNumPersonas" />