Суммируйте два значения из двух на разные события

Я хотел бы знать, как взять сумму из 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 значения, выполнить операцию сложения и затем сохранить результат в другой переменной для привязки к другому 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, не волнуйтесь): введите описание изображения здесь

введите описание изображения здесь

Итак, как я могу взять их и поставить элемент, который говорит: все персонажи: взрослые + дети

Огромное спасибо!!

Всего 2 ответа


Ваш код следует правильной идее, есть только две проблемы. Во-первых, при использовании нескольких отдельных селекторов в одном объекте их необходимо разделять запятой. Во-вторых, класс первого 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" />


Попробуй это:

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