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

debugcn 发表于 Dev

用户7236046

我有以下 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);

    // ...

});

我查看了像 jQueryeach方法这样的循环，但我不知道如何遍历filter-inputsdiv 中的每个输入。

内纳德·弗拉卡尔

您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。