Question

我拼凑了一个脚本，该脚本在文本框中添加值并显示跨度中的总和。我已经尝试了很多东西，但我不能让它在输入文本框中显示总和。这是我一直在努力的小提琴.. http://jsfiddle.net/elevationprint/MaK2k/17/

基本上我想将跨度更改为输入文本框。如果有人可以看看，让我知道我错过了什么，我将不胜感激！代码就是这个

HTML

Red<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br>
Blue<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br><br>
Total = <span class="qty12lable"></span> x $.95<br>
Total = <span class="qty24lable"></span> x $1.40<br>

SCRIPT

$('.qty12').keyup(function(){
   var qty12Sum=0;
    $('.qty12').each(function(){
        if (this.value != "")
           qty12Sum+=parseInt(this.value);

});
   // alert('foo');
    $(".qty12lable").text(qty12Sum);
    //console.log(amountSum);        });


$('.qty24').keyup(function(){
   var qty24Sum=0;
    $('.qty24').each(function(){
        if (this.value != "")
           qty24Sum+=parseInt(this.value);

});
   // alert('foo');
    $(".qty24lable").text(qty24Sum);
    //console.log(amountSum);    });

Answer 1

您可以像这样定位输入字段：

Total = <input class="qty12lable" value=""> x $.95<br>
Total = <input class="qty24lable" value=""> x $1.40<br>

$("input.qty12lable").val(qty12Sum);
$("input.qty24lable").val(qty24Sum);

Answer 2

要设置文本框的文本（值），您必须使用.val()而不是.text()。像这样：

＆＃13;

$('.qty12').keyup(function() {
  var qty12Sum = 0;
  $('.qty12').each(function() {
    if (this.value != "")
      qty12Sum += parseInt(this.value);

  });
  
  
  $(".qty12lable").val(qty12Sum);
});


$('.qty24').keyup(function() {
  var qty24Sum = 0;
  $('.qty24').each(function() {
    if (this.value != "")
      qty24Sum += parseInt(this.value);

  });
  
  
  $(".qty24lable").val(qty24Sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Red
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>Blue
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>
<br>Total = <input class="qty12lable"/> x $.95
<br>Total = <input class="qty24lable"/> x $1.40
<br>

＆＃13;

Answer 3

此代码段有一些关于如何在输入字段上附加事件侦听器以及如何获取其值的逻辑。它并不完美，从生产级别的角度来看有很多错误，但这会暗示如何使用Jquery监听和操作DOM。这就是Jquery的意义所在。

$( "input" )
  .change(function () {
   var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0;
   if(parseInt($(this).val()) === NaN) {
     return;
   }
   $('#total').html(parseInt($(this).val()) + parseInt(prevVal));
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="1"></input><br>
<input type="text" id="2"></input><br>
<hr>
Total = <span id="total" class="qty12lable"></span> <br>

获取值以填充文本而不是填充范围

3 个答案: