javascript - 计算添加的输入字段中的 TOTAL

Question

我有一个小问题。我一直在网上寻找答案，但主要是针对未生成/添加的输入字段。

<script>
$(document).ready(function(){


/* --- ADD FIELD --- */

    $('.TotalMultiField').each(function() {
    var $wrapper = $('.multiFields', this);
    $(".addField", $(this)).click(function(e) {
        $('.multiField:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
    });

/* --- REMOVE FIELD --- */

    $('.multiField .removeField', $wrapper).click(function() {
        if ($('.multiField', $wrapper).length > 1)
            $(this).parent('.multiField').remove();
    });
});
</script>

上面是添加和删除字段的 Jquery 脚本。下面是 HTML 代码。如您所见，在“插入数字”字段中，总计应显示在跨度 id="added"中。

<form role="form" action=""" method="">
    <div class="TotalMultiField">
      <div class="multiFields">
        <div class="multiField">
          <input type="date">
<input type="number" class="number" placeholder="Insert a number">
          <button type="button" class="removeField">Remove</button>
        </div>
      </div>
    <button type="button" class="addField">Add field</button>
  </div>
  Total:<span id="added"></span>
</form>

Answer 1

刚刚注意到您更新了您确实想要一个总和，这是一个根据模糊计算的总数的 fiddle ，当您删除一行时，根据需要绑定(bind)其他事件(需要一些整理，但这应该让您开始):

http://jsfiddle.net/1ggaco1d/4/

下面的代码进行总计:

function total() {

    var total = 0;
    $(".number").each(function (idx, el) {
        var value = $(el).val();
        if (value !== "") {
            total = total + parseFloat($(el).val());
        }

    });
    $("#added").text(total);
}