在输入数据时使用jQuery更新div

Question

我有一个包含四个文本输入元素的表单.每当其中一个更新时,我希望四个文本输入框的总和显示在下面的div中,而无需用户按下按钮.这是我到目前为止(我从这里得到了想法[这只适用于select？]):

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的新手,所以我不确定我是否应该在这个实例中使用它.

Answer 1

您缺少一个#或.在您的选择器中,具体取决于if 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/