Question

我有一个计算脚本，价格，电话号码和最后一个电话号码的2位数。

价格将通过我网站上的链接显示。当价格和2位数字自动显示时，我有一点问题。当价格自动显示并输入电话号码时，成本栏中没有自动成本且仍为0.我必须点击价格栏和数字栏才能显示成本。

例如，如果您在价格列中输入2000并输入电话号码，则会自动显示数字列，但在成本列中没有自动成本且仍为0.因此，您必须单击价格列和数字列显示费用。

还有一个小问题，如果我添加带有像此代码的文本字段的成本列

＆＃13;

<tr>
        <td>4</td>
        <td>Cost</td>
        <td><input class="txt" onfocus="calculateSum()" name="sum" type="text" id="sum"></td>
</tr>

＆＃13;

带有文本字段的成本列中没有自动成本。

如何在费用列和文本字段中显示自动费用？是否有关于此脚本的解决方案？

示例：

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>

<script>
$(document).ready(function() {
	$('#phone_number').on('keyup', function() {
	$('#digits').val($(this).val().substr(-2));
});
});
</script>
<script>
$(document).ready(function(){
 
        //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(0));
}
</script>
        
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" onfocus="calculateSum()" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" onfocus="calculateSum()" name="digits" type="text" id="digits"></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>

</body>
</html>

＆＃13;

Answer 1

你的问题不清楚。我试图尽可能地解决你的问题。不熟悉网络编程不是问题，但无法向其他人表达您的问题，可能会使您的问题无法解答。因此，尽量使您的问题变得简单易懂。

我已经将你的jQuery代码压缩到几行，并使你的两位数字段只读，所以它是由代码本身计算的。

$(document).ready(function() {
  var price=$('#price'),
      phone=$('#phone_number'),
      digits=$('#digits'),
      sum=$('#sum');
  function calculateSum() {
    var digitsVal=parseInt(phone.val().substr(-2));
    digitsVal=isNaN(digitsVal)?0:digitsVal;
    digits.val(digitsVal);
    sum.html(parseFloat(price.val())+digitsVal);
  };
  phone.on('keyup', calculateSum);
  price.on('keyup', calculateSum);
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" name="digits" type="text" id="digits" readonly></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><span id="sum">0</span></td>
    </tr>
</table>
</body>
</html>

更新：如果您需要将成本设为文本字段而不是跨度，则只需进行以下更改

$(document).ready(function() {
  var price=$('#price'),
      phone=$('#phone_number'),
      digits=$('#digits'),
      sum=$('#sum');
  function calculateSum() {
    var digitsVal=parseInt(phone.val().substr(-2));
    digitsVal=isNaN(digitsVal)?0:digitsVal;
    digits.val(digitsVal);
    sum.val(parseFloat(price.val())+digitsVal);
  };
  phone.on('keyup', calculateSum);
  price.on('keyup', calculateSum);
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>berkelilingkesemua.info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
<table width="300px" border="1">
    <tr>
        <td width="40px">1</td>
        <td>Price</td>
        <td><input class="txt" name="price" type="text" id="price"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Phone Number</td>
        <td><input name="phone_number" type="text" id="phone_number"></td>
    </tr>
    <tr>
        <td>3</td>
        <td>2 Digits</td>
        <td><input class="txt" name="digits" type="text" id="digits" readonly></td>
    </tr>
    <tr id="summation">
        <td>&nbsp;</td>
        <td align="right">Cost :</td>
        <td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>
    </tr>
</table>
</body>
</html>

我做了以下更改：

sum.html(parseFloat(price.val())+digitsVal);

成了

sum.val(parseFloat(price.val())+digitsVal);

和

<td align="center"><span id="sum">0</span></td>

成了

<td align="center"><input type="text" name="sum" id="sum" value="0"></span></td>

如何修复此计算脚本的价格，电话号码，2位数并添加文本字段的费用？

1 个答案: