jQuery函數求和具有2個類的文本框

Question

我正在嘗試使用jquery來添加一組文本框。 每個文本框都有一個類（class1）使用引導程序對其進行樣式設置。 我正在添加一個附加類（class2）以運行jquery函數。 這是兩個文本框的外觀示例。

<input type="text" class="class1 class2" name="textbox1" id="textbox1 />
<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

這是我的jquery函數。 GrandTotal是用於保存總和的文本框的ID。

$('.class2').keyup(function () { 
  var sum = 0;

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

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

});

沒用 #GrandTotal沒有任何結果。 有人可以告訴我我在做什么錯嗎？ 在此先感謝您的幫助。

cdr6800

Answer 1

您必須驗證輸入是否為數字，否則將得到NaN（不是數字）。 JavaScript具有isNaN()函數，用於檢查給定的輸入是否為NaN。

$('input.class2').keyup(function() {
  var sum = 0;

  $('input.class2').each(function() {
    var value = Number($(this).val());
    if(!isNaN(value)) {
        sum += value;
    }
  });

  $('#GrandTotal').val(sum);
});

實際觀看： https : //jsfiddle.net/ibrahimeymenduran/ymnu9hf4/

Answer 2

您的HTML無效。

<input type="test" class="class1 class2" name="textbox2" id="textbox2 />

► 類型=“文本”而不​​是“測試”

► 您尚未用雙引號關閉ID。

 $(document).ready(function() { $('.class2').keyup(function() { var sum = 0; $('.class2').each(function() { sum += Number($(this).val()); }); $('#GrandTotal').val(sum); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="class1 class2" name="textbox1" id="textbox1"> <input type=" text " class="class1 class2 " name="textbox2 " id="textbox2"> <input type=" text " name="textbox3 " id="GrandTotal"> 

Answer 3

即使沒有jQuery，也可以使用純JavaScript來實現。

 var GrandTotal = document.getElementById("GrandTotal"); var values = [0, 0]; function updateTotal(element, index) { element.onkeyup = function() { if (!isNaN(element.value)) { values[index] = parseInt(element.value || 0); } GrandTotal.textContent = values[0] + values[1]; } } Array.prototype.forEach.call(document.getElementsByClassName('class2'), updateTotal); 

 <input type="text" class="class1 class2" name="textbox1" id="textbox1" /> <input type="test" class="class1 class2" name="textbox2" id="textbox2" /> <p id="GrandTotal"></p> 

• Array.from(document.getElementsByClassName('class2')).forEach(updateTotal); 使用class2獲得一個元素數組。 forEach為每個調用updateTotal 。
• updateTotal接受element ，該element將是已更改的元素，並進行index以指示它是您的<input/>第一個還是第二個。
• 在element.onkeyup內部，我們檢查給定的<input/>持有非NaN值。 如果是這樣，我們將數值（或0）放在values數組中的適當位置。 然后，我們更新#GrandTotal的文本。

這樣， #GrandTotal值將始終隨着每個<input/>的更改而更新，除非它將更改為無效值，在這種情況下它將保留最后一個有效值。