javascript - jquery each() 迭代

Question

按下按钮时，我想将输入值与 p 标签相乘。我的html结构是这样的：

<div class="table">
    <input class="input" type="text" /> 
    <p>10</p>
</div>

<div class="table">
    <input class="input" type="text" />
    <p>20</p>
</div>

<div class="bill"></div> // the result must be displayed in this tag
<button class="button">Calculate</button>

我使用每种方法来选择输入元素，这是我的 jquery 结构：

$(function() {
   function calculate()
   {
      $('input.input').each(function(index) {
      var inputValue = $(this).val();
      var valueP = $(this).next('p').text();
      var result = inputValue * valueP;
      $('.bill').text(result);// displays only last multipled result
      console.log(result); // displays all multipled results
   });
   }

   $('.button').click(function() {
       calculate();
   });
});

我实现了将输入值与 p 标签相乘，但问题是只有最后一个相乘的输入值显示在带有“bill”的类中。但是使用 console.log 看起来很好 此外，使用“document.write(result)”也很好。我该如何解决这个问题？顺便说一句，有人可能会说，我怎么能把所有相乘的结果相加！感谢提前！

Answer 1

试试这个演示

function calculate() {
    var result = 0;
    $('input.input').each(function(index) {
        var inputValue = Number($(this).val());
        var valueP = Number($(this).next('p').text());
        result += inputValue * valueP;
//as you were adding here it will each time update the .bill
        console.log(result);
    });
    $('.bill').text(result);
}

$('.button').click(calculate);​

更新

除了添加它们之外，还显示所有计算结果的 演示

function calculate()
{
   //var result = 0;
  $('input.input').each(function(index) {
  var inputValue = Number($(this).val());
  var valueP = Number($(this).next('p').text());
  var  result = inputValue * valueP;
  $('.bill').append(result+"<br/>");
  console.log(result);
});
}

$('.button').click(calculate);​

Answer 2

请试试这个：

function calculate() {
    var result = 0;
    $('input.input').each(function(index) {
        var inputValue = Number($(this).val());
        var valueP = Number($(this).next('p').text());
        result += inputValue * valueP;
        $('.bill').append(result);
        console.log(result);
    });

}

$('.button').click(calculate);​