Question

我有一个JavaScript函数来聚合输入字段的值，我来自this对类似问题的回答。我的函数似乎正在运行，但是仅在修改默认值之一后才计算总值。如何从一开始就将默认值包含在函数聚合中？这里是fiddle，下面是代码：

JavaScript：

$(document).ready(function(){

    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".qty1").each(function() {

    $(this).keyup(function(){
        calculateSum();
                    });
                });

            });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".qty1").each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
        sum += parseFloat(this.value);
        }

        });

    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(2)) * 0.2;}

html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
</tr>
<tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
</tr>
<tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
</tr>
<tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
</tr>
<tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
</tr>
<tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
</tr>

Answer 1

只需在calculateSum()内部和keyup事件外部调用$(document).ready：

$(document).ready(function(){
  calculateSum(); //call the function here
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  $(".txt").each(function() {

    $(this).keyup(function(){
      calculateSum();
    });
  });

});

function calculateSum() {

  var sum = 0;
  //iterate through each textboxes and add the values
  $(".txt").each(function() {

    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  //.toFixed() method will roundoff the final sum to 2 decimal places
  $("#sum").html(sum.toFixed(2));
}

body {
  font-family: sans-serif;
}
#summation {
  font-size: 18px;
  font-weight: bold;
  color:#174C68;
}
.txt {
  background-color: #FEFFB0;
  font-weight: bold;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
  <tr>
    <td width="40px">1</td>
    <td>Butter</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr>
    <td>2</td>
    <td>Cheese</td>
    <td><input class="txt" type="text" name="txt" value="32"/></td>
  </tr>
  <tr>
    <td>3</td>
    <td>Eggs</td>
    <td><input class="txt" type="text" name="txt" value="47"/></td>
  </tr>
  <tr>
    <td>4</td>
    <td>Milk</td>
    <td><input class="txt" type="text" name="txt" value="31"/></td>
  </tr>
  <tr>
    <td>5</td>
    <td>Bread</td>
    <td><input class="txt" type="text" name="txt" value="69"/></td>
  </tr>
  <tr>
    <td>6</td>
    <td>Soap</td>
    <td><input class="txt" type="text" name="txt" value="65"/></td>
  </tr>
  <tr id="summation">
    <td>&nbsp;</td>
    <td align="right">Sum :</td>
    <td align="center"><span id="sum">0</span></td>
  </tr>
</table>

JavaScript输入聚合函数不包含默认输入值

1 个答案: