加在一起使用JavaScript

各種輸入字段我有幾個文本字段加在一起使用JavaScript

<input class="add" type="text"> 
<input class="add" type="text"> 
<input class="add" type="text"> 
<input class="add" type="text"> 
<p id="total"></p>

每個字段中的值由PHP腳本動態添加加載頁面時，但用戶可以編輯的選項。我一直試圖找出一種方法來將所有使用javascript的值相加，並將它們輸出到#total標記中。我已經發現了幾個腳本，並試圖自己寫一個腳本，但它沒有縫隙工作。

我找到的最好的這個樣子....

function addAll() { 
    var sum = "" 

    var values = $('.add').each(function(){ 
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value); 
    }); 

    $('#total').text(sum); 
} 
$('.add').keyup(displayTotal);

但沒有任何輸出

我做什麼嚴重的問題？

乾杯

來源

2012-08-13 Chris Headleand

你定義了一個名爲'中的addAll（）'函數，但你的keyup事件呼喚一個叫做'displayTotal（）'函數，我們看不到這裏。也許你只是使用了錯誤的函數引用？ – 2012-08-13 13:49:08

嘗試'this.val（）' – 2012-08-13 13:49:29

@paiCode - 而不是'this（））.val（）'比'this.val（）' - 注意回調中的this是純'HTMLElement'而不是'jQuery'項目集。 '$（this）.val（）'這是'$（this）.attr'（'value'）'的簡寫，即完全'this.value' – abuduba 2012-08-13 13:53:14

如果它的數字要添加那麼這應該工作：

function addAll() { 
    var sum = 0; 
    $('.add').each(function(){ 
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value); 
    }); 

    $('#total').html(sum); 
} 
$('.add').keyup(addAll);

DEMO

如果你想要這個網頁加載工作，然後在.ready()函數添加調用addAll 。下面是完整的代碼：

$(document).ready(function(){ 

    addAll(); 
    $('.add').keyup(addAll); 
}) 

function addAll() { 
    var sum = 0; 
    $('.add').each(function(){ 
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value); 
    }); 

    $('#total').html(sum); 
}

來源

2012-08-13 13:58:13 Niklas

我在這個測試頁上試過這個解決方案，但是仍然沒有喜悅......有什麼想法嗎？ – 2012-08-13 14:05:07

在FF中工作14.因爲您正在添加數字，對吧？ – Niklas 2012-08-13 14:06:48

y添加數字... – 2012-08-13 14:07:21

var sum = 0;

sum + = isNaN（$（this）.val（））|| $ .trim（$（this）.val（））===''？ 0：parseFloat（this.val（））;

來源

2012-08-13 13:53:28 PerL

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

    $('.add').each(function(){ 
     sum += this.value && (this.value|0) && parseFloat(this.value) || 0; 
    }); 
    $('#total').text(sum); 

});

來源

2012-08-13 13:56:10 abuduba

加在一起使用JavaScript

回答

相關問題