在輸入數據時使用jQuery更新div

我有一個帶有四個文本輸入元素的窗體。每次更新其中一個時，我希望四個文本輸入框的總和顯示在下面的div中，而無需用戶按下按鈕。這裏是我到目前爲止（我的想法來自here [不帶選擇這唯一的工作？]）：在輸入數據時使用jQuery更新div

var getSum = function() { 
    var email = $('#emailDown').val(); 
    var internet = $('#internetDown').val(); 
    var server = $('#serverDown').val(); 
    var desktop = $('#pcDown').val(); 
    //TODO:Check for integers (not needed with sliders) 
    var sum = email + internet + server + desktop; 
    $('totalHoursDown').html(sum); 
} 
$('#emailDown').change(getSum(event)); 
$('#internetDown').change(getSum(event)); 
$('#serverDown').change(getSum(event)); 
$('#pcDown').change(getSum(event));

目前，它沒有更新。（不要擔心驗證）。我是PHP的新手，所以我不確定在這種情況下是否應該使用它。

來源

2012-05-10 SomeKittens

你缺少你選擇一個#或.，取決於如果totalHoursDown是一個類或ID：

$('totalHoursDown').html(sum); 

// Should be this if ID 
$('#totalHoursDown').html(sum); 
// or this if class 
$('.totalHoursDown').html(sum);

更新：

我修改了代碼由jmar777一一點點，使其工作。試試這個：

$(function(){ 
    var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'), 
    $totalHoursDown = $('#totalHoursDown'); 
    $fields.change(function() { 
     var sum = 0; 
     $fields.each(function() 
       { 
        var val = parseInt($(this).val(), 10); 
        sum += (isNaN(val)) ? 0 : val; 
       }); 
     $totalHoursDown.html(sum); 
    }); 
});

這裏是工作提琴，以及：http://jsfiddle.net/mSqtD/

來源

2012-05-10 13:12:59

好的趕上....這就是問題 – TRR

希望christofer是正確的 –

良好的捕獲，但沒有解決問題。 – SomeKittens

試試這個：

var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'), 
    $totalHoursDown = $('#totalHoursDown'); 
$fields.change(function() { 
    var sum = 0; 
    $fields.each(function() { sum += $(this).val(); }); 
    $totalHoursDown.html(sum); 
});

而且，在你的榜樣，你有$('totalHoursDown').html(sum);，這我假設打算成爲一個ID選擇器（即，$('#totalHoursDown').html(sum);。

來源

2012-05-10 13:15:20 jmar777

在輸入數據時使用jQuery更新div

回答

相關問題