用jQuery計算多個輸入的總和

我知道這種性質的問題在很多場合都被問過，但是在幾個小時嘗試不同的東西之後，我仍然沒有更聰明的想法。希望有人能夠啓發我。用jQuery計算多個輸入的總和

我正在嘗試添加多個輸入的值並將總值輸出到單獨的字段中。下面的代碼片段完成了這項工作，但我需要循環每個季節，因爲它們是使用不同的ID動態創建的。

$('#season-0 .appearances').val(
    Number($('#season-4 .appearances').val()) + 
    Number($('#season-36 .appearances').val()) 
); 
$('#season-0 .goals').val(
    Number($('#season-4 .goals').val()) + 
    Number($('#season-36 .goals').val()) 
);

我已經嘗試了一些不同的功能，但似乎沒有奏效，例如：

var sum = 0; 
$('.appearances').each(function(){ 
    sum = sum + Number($(this).val()); 
}); 
$('#season-0 .appearances').html(sum);

我會很感激有這方面的幫助，它一直在做我的頭在太長今;）

下面是相關的HTML：

<div id="season-0"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" data-index="appearances" class="appearances" value="" /> 
      </td> 
      <td> 
       <input type="text" data-index="goals" class="goals" value="" /> 
      </td> 
     </tr> 
    </table> 
</div> 
<div id="season-4"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" data-index="appearances" class="appearances" value="25" /> 
      </td> 
      <td> 
       <input type="text" data-index="goals" class="goals" value="4" /> 
      </td> 
     </tr> 
    </table> 
</div> 
<div id="season-36"> 
    <table> 
     <tr> 
      <td> 
       <input type="text" data-index="appearances" class="appearances" value="19" /> 
      </td> 
      <td> 
       <input type="text" data-index="goals" class="goals" value="8" /> 
      </td> 
     </tr> 
    </table> 
</div>

來源

2014-03-02 roofdog

什麼是你的代表HTML？ –

我編輯了我的文章，包括HTML，感謝您的時間。 – roofdog

哦，我明白了，你想顯示的總和第一輸入框中，這樣做，你必須使用VAL（總和），所以這裏是工作的解決方案：

var sum = 0; 
$('.appearances').each(function(){ 
    sum += Number($(this).val()); 
}); 
$('#season-0 .appearances').val(sum);

此外，還要確保你已經正確連接jQuery庫。

這裏是小提琴：

http://jsfiddle.net/Ephws/

來源

2014-03-02 21:08:53

感謝您的回覆，但您的建議似乎沒有奏效。我已經包含了HTML，但確保HTML不會像第一個示例正在工作那樣引起問題。我可以看到這應該如何工作 - 說實話，這真的讓我感到困惑。 – roofdog

我更新了代碼以匹配您的HTML。 –

感謝哥們，這是一種享受，爲我節省了幾個小時的沮喪。 – roofdog

用jQuery計算多個輸入的總和

回答

相關問題