Question

我正在寻找一种在元素内创建输入总和的方法。

我遇到了这个问题，每当我使用每个值时，函数本身都会求和所有值，而不仅仅是div中的值。

使用此工具无法正常工作：

$('div').each(function(){
    var sum = 0;

    $(this).find('input').each(function(){
        sum += Number($(this).val());
        });

        $('.sum').val(sum);

});

有人可以帮助您

http://jsfiddle.net/1keyup/q7rL2a38

Answer 1

通过使用$('.sum').val(sum);，您将为所有.sum输入设置一个值。因此，您只需引用每个.sum中的div输入即可通过使用$(this).find('.sum').val(sum);

$('div').each(function(){
  var sum = 0;
  
  $(this).find('input').each(function(){
    sum += Number($(this).val());
  });
  
  $(this).find('.sum').val(sum);
  
});

div{
  margin: 10px;
  padding: 7px
}

input{ padding: 3px 5px; font-family: monospace; width: 50px}
div:first-child{
  border: 1px solid grey;
  background-color: rgba(0, 0, 0, 0.1);
}
div:nth-child(2){
  border: 1px solid blue;
  background-color: rgba(0, 0, 255, 0.1);
}
div:nth-child(3){
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="text" class="tosum" value="1"/> +
  <input type="text" class="tosum" value="1"/> = 
  <input type="text" class="sum"/>
</div>

<div>
  <input type="text" class="tosum" value="2"/> +
  <input type="text" class="tosum" value="5"/> = 
  <input type="text" class="sum"/>
</div>

<div>
  <input type="text" class="tosum" value="3"/> +
  <input type="text" class="tosum" value="3"/> = 
  <input type="text" class="sum"/>
</div>

jQuery每个div的总和输入值？

1 个答案: