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>

这将获取范围滑块的即时值，其值为“＃34; first＆＃34;并在元素＆＃34;结果＆＃34;中立即输出。工作正常。

但是现在我要输出所有id＆＃39; s＃34;第一＆＃34;，＆＃34;第二＆＃34;，＆＃34;第三＆＃34;等等。

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

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类分配给您想要对其求和的所有范围字段更容易。然后，这将允许您使用单个选择器在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

选择所有元素并使用.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>

分配一个公共类比通过ID选择更好，但这取决于你。

Answer 4

我会使用$.fn.extend()：

＆＃13;

// 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());
});
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

.valSum()现在应该适用于任何选择器，无论如何都要输入。所以，

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

也可以在不添加HTML类的情况下工作。

由于这是更可重用的，因此它应该是您编码的方式。

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

4 个答案: