使用jQuery在页面上显示输入总和 [英] Display sum of inputs on page with jQuery

问题描述

我在jQuery方面的经验有限，因此不胜感激.

I have limited experience with jQuery so any help or advice is much appreciated.

我试图将输入的总和显示在页面上.

I am trying to get a sum of inputs to display as they are added on a page.

我通过以下工作设置了jsfiddle: http://jsfiddle.net/5wU3v/

I set up a jsfiddle with the intial work: http://jsfiddle.net/5wU3v/

这是jsfiddle中的代码:

Here's code from the jsfiddle:

Shipping: <input type="text" class="input-small fee" name="ship_fee" id="ship-fee">

Other: <input type="text" class="input-small fee" name="other_fee" id="other-fee">

<div>
    $ <span id="total" data-total="<?=$total?>"><p></p></span>
</div>


$('#fee').change(function () {
    var total = $('.total').val();
    $("p").text(total);
});

但是，我似乎什至无法显示单个输入值，因此，我还没有添加代码来计算总和.

However I can't seem to get even a single input value to display, and consequently I have not added code to figure out the sums yet.

推荐答案

//use the class-selector .fe because fee is the class attribute
var $fees = $('.fee').change(function(){
    var total = 0;
    //iterate through all the fee elements and find the total
    $fees.each(function(){
        total += (parseFloat($.trim(this.value)) ||0)
    })
    $( "p" ).text( total.toFixed(2) );
});    

演示:小提琴

这篇关于使用jQuery在页面上显示输入总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！