Question

我有以下HTML：

<div class="filters">

    <div class="filter-label">6</div>

    <div class="filter-inputs">

        <input type="number" name="i1" id="i1" value="1" min="0" step="1" />
        <input type="number" name="i2" id="i2" value="2" min="0" step="1" />
        <input type="number" name="i3" id="i3" value="3" min="0" step="1" />

    </div>

</div>

问题：

我想，当任何输入更改时，我想要获得该值，   其他两个文本框的值，并将它们全部加在一起。一旦   我有总价值，然后需要更改标签的文本   具有新值。

我还有以下JavaScript（jQuery）来检测何时发生更改，但是在那之后，我不知道如何遍历div中的每个输入并获取值。

$('.filter .filter-inputs input').on('input', function() {

    var element = $(this);

    // ...

});

我看着类似jQuery each方法的循环，但是我不知道如何遍历filter-inputs div内的每个输入。

Answer 1

您可以使用map和get方法从输入创建数组，然后使用reduce方法计算总和。

let inputs = $('.filters input');
let label = $('.filter-label');

inputs.on('input', function() {
  let sum = inputs.map(function() {
    return $(this).val()
  }).get().reduce((r, e) => r + +e, 0);

  label.text(sum)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
  <div class="filter-label">6</div>
  <div class="filter-inputs">
    <input type="number" name="i1" id="i1" value="1" min="0" step="1" />
    <input type="number" name="i2" id="i2" value="2" min="0" step="1" />
    <input type="number" name="i3" id="i3" value="3" min="0" step="1" />
  </div>
</div>

或者您可以只使用Array.from方法创建数组，然后使用reduce方法对值求和。

let inputs = $('.filters input');
let label = $('.filter-label');

inputs.on('input', function() {
  label.text(Array.from(inputs).reduce((r, {value}) => r + +value, 0))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">
  <div class="filter-label">6</div>
  <div class="filter-inputs">
    <input type="number" name="i1" id="i1" value="1" min="0" step="1" />
    <input type="number" name="i2" id="i2" value="2" min="0" step="1" />
    <input type="number" name="i3" id="i3" value="3" min="0" step="1" />
  </div>
</div>

Answer 2

没问题！

$('.filter .filter-inputs input').on('input', function() {

    //not needed:
    //var element = $(this);

    // Obtain numeric entries
    var i1 = Number($("#i1").val());
    var i2 = Number($("#i2").val());
    var i3 = Number($("#i3").val());

    // Calculate sum of entries
    var total = i1 + i2 + i3;

    // Populate label div with sum
    $(".filter-label").html(String(total));
});

祝你好运！

Answer 3

使用此脚本

$('.filter-inputs input').change(function(){
    var total = 0;
    $('.filter-inputs input').each(function(){

        total += parseInt($(this).val());
    });

   $('.filter-label').html(total);
});

Answer 4

http://jsfiddle.net/72e3jLc0/任务不需要jQuery

  let label = document.querySelector('.filter-label');
  let inputs = document.querySelectorAll('.filter-inputs input');
  inputs.forEach(input => {
      input.addEventListener('change', e => {
          label.innerText = parseInt(label.innerText) + parseInt(input.value);
      });
  });

Answer 5

尝试使用以下方法：

$(document).ready(function() {
  var total=0;
  $("input[type='number']").change(function() {
    $(".results").html("");
    var objects = $(".filters").find("input[type='number']");
    for (var i = 0; i < objects.length; i++) {
      total += parseInt($(objects[i]).val());
    }
    $(".filter-label").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filters">

  <div class="filter-label">6</div>

  <div class="filter-inputs">

    <input type="number" name="i1" id="i1" value="1" min="0" step="1" />
    <input type="number" name="i2" id="i2" value="2" min="0" step="1" />
    <input type="number" name="i3" id="i3" value="3" min="0" step="1" />

  </div>

</div>

Answer 6

我知道这是一个旧线程，但我想做出我的贡献。

id 可以用 document 或 "body" 替换，如果您的所有输入都具有 类，则不需要 input >.form-control。

$("#id-of-overall-div-element").on("change", "input, .form-control", function () {
            // Do something     
});

输入更改时，获取div中的所有输入值并更新标签

6 个答案: