JS：从多个 id 构建值的总和

Question

我有这个 HTML + JS:

<input type="text" id="first" value="" />
<input type="text" id="second" value="" />
<input type="text" id="third" value="" />

<b id="result"></b>

<script>
$(document).ready(function () {
 var $range = $("#first"), $result = $("#result");

 var track = function () {
  var $this = $(this), value = $this.prop("value");
  $result.html("Value: " + value);
 };

 $range.on("change", track);
});
</script>

这会获取具有 id "first" 的范围滑块的即时值，并立即在元素 "result" 中输出它。工作正常。

但是现在我想输出所有id的"first"、"second"、"third"等的总和

如何在此代码中执行此操作？

Answer 1

使用 .on() 附加事件侦听器三次，正如您对第一次所做的那样。然后，而不是做 $this.prop 你会想要真正抓住每个人。

$(document).ready(function () {
 var $first = $("#first"), $second = $("#second"), $third = $("#third"), $result = $("#result");

 var track = function () {
  var value = $first.prop("value") + $second.prop("value") + $third.prop("value");
  $result.html("Value: " + value);
 };

 $first.on("change", track);
 $second.on("change", track);
 $third.on("change", track);
});

Answer 2

首先，您可能会发现将 CSS class 分配给您想要对其值求和的所有范围字段更容易。这将允许您使用单个选择器在 DOM 中找到它们。

但您需要做的就是找到所有范围元素，遍历它们，边走边求和它们的值。然后将结果分配给你的 div.

$(function () {
    var $range = $('#first, #second, #third');
    var $result = $('#result');

    function track(event) {
        var total = 0;

        $range.each(function (i, element) {
            total += parseInt($(element).val(), 10);
        });

        $result.html('Value: ' + total);
    }

    $range.on('change', track);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="first" type="range" min="0" max="10" value="1">
<input id="second" type="range" min="0" max="10" value="2">
<input id="third" type="range" min="0" max="10" value="3">

<div id="result"></div>

我假设您使用的是整数值。如果不是，您将需要使用 parseInt.

删除整数转换

Answer 3

Select所有元素并使用.reduce().

$(document).ready(function() {
  const result = $("#result");

  const range = $("#first,#second,#third")
      .on("change", function() {
         result.html("Value: " + 
            range.toArray().reduce((sum, el) => sum + +el.value, 0));
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="first" value="1" />
<input type="text" id="second" value="2" />
<input type="text" id="third" value="3" />

<b id="result"></b>

分配一个公共 class 比按 ID 选择更好，但这取决于您。

Answer 4

我会用 $.fn.extend():

// external.js
$(function(){
$.fn.extend({
  valSum: function(){
    var c = 0;
    this.each(function(){
      c += +$(this).val();
    });
    return c;
  }
});
$('#frm').submit(function(e){
  e.preventDefault();
});
// I would give them all a class instead - but
var sum = $('.sum');
sum.change(function(){
  $('#output').html(sum.valSum());
});
});

/* external.css */
html,body{
  padding:0; margin:0;
}
.main{
  width:940px; padding:20px; margin:0 auto;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>.valSum()</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='external.js'></script>
  </head>
  <body>
    <div class='main'>
      <form id='frm' name='frm'>
        <label for='first'>First</label>
        <input id='first' name='first' class='sum' type='text' />
        <label for='second'>Second</label>
        <input id='second' name='second' class='sum' type='text' />
        <label for='third'>Third</label>
        <input id='third' name='third' class='sum' type='text' />
      </form>
      <div id='output'></div>
    </div>
  </body>
</html>

.valSum() 现在应该可以在任何选择器上工作，无论如何都有输入。所以，

var fst = $('#first, #second, #third');
fst.change(function(){
  $('#output').html(fst.valSum());
});

也应该在不添加 HTML class.

的情况下工作

因为这更可重用，所以应该是你编码的方式。

JS：从多个 id 构建值的总和

JS: Build sum of values from multiple id's

javascript

function

range

document-ready