时间戳

首页 > 解决方案 > 将两个值相加来改变不同的事件

javascript - 将两个值相加来改变不同的事件

问题描述

我想知道如何从 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);
});

所以我想对这两个值进行加法运算，然后将结果保存在其他变量中以绑定到另一个 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 的人不要担心）： 在此处输入图像描述

在此处输入图像描述

那么我如何能够接受它们并放置一个元素，上面写着：总角色：成人+儿童

太感谢了！！

标签： javascriptjqueryhtmlasp.net-core

解决方案

您的代码遵循正确的想法，只有两个问题。首先，当在单个对象中使用多个单独的选择器时，您需要用逗号分隔它们。其次，第一个类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" />

推荐阅读