javascript - js 变量在两个事件中的行为不同

Question

我正在创建包含商品的订单。人们在输入字段中输入所需的项目数量。正如他们所做的那样， keyUp 函数计算每个项目的总计并显示在它旁边。同时，在表格的底部，会显示最终的总成本和元素总数。这一切都是用JS完成的。然后使用 PHP 将其传递到下一页。这是一个确认页面。然后用户单击“继续”按钮将数据提交到下一页，数据将插入到数据库中。

这一切都很好。

但是，在确认页面上有一个“编辑”按钮，单击该按钮可返回订单表格。所有以前的数据和总计都正确无误，用户可以编辑并重新提交。除了项目总数显示为之前提交的两倍之外

代码是

$('document').ready(function(){

        $("input").each(function() {
                    $(this).keyup(function(){

                        calculateSum();
                    });

                });
});
    calculateSum();

    function calculateSum() {

    //Calculate Total Items
            var sum = 0;
            var totcost=0;
            //iterate through each textboxes and add the values
            $("input").each(function() {

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

    //Calculate Total Cost
            $("div.ittot").each(function() {
                var tots=0;
                var str=$(this).text();
                var thenum = str.replace( /^\D+/g, '');
                var tots = parseInt(thenum,10);

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

        $("#totalcost").css("background-color", "green").html("<div style='float:left;margin-left:5px'><span style='font-weight:700'>Total Cost : </span>Rs."+ totcost + "</div><div style='float:right;margin-right:5px'><span style='font-weight:700'>Total Items : </span>" + sum + "</div><div style='clear:both'></div>");
    }

totcost 变量工作得很好。

但是 sum 变量不会在每次函数调用时重置，并且每次都会对总计进行复合，而不是每次都重新总计。

出了什么问题？两者都有相同的命令。

编辑

按要求填写完整的订单代码

    include('conn.php');
    $itemsc="";
    $arraytable = array();

$result=$orderdb->query("SELECT * FROM rates ORDER BY item");

if ($result) {

/* Get field information for all columns */
    while ($finfo = $result->fetch_assoc()) {

        $arraytable[$finfo['item']] = $finfo['rate'];

        if($finfo['type']=="Male"){
            $itemsm[]=$finfo['item'];
            $itemsidm[]=$finfo['id'];
        }
        elseif($finfo['type']=="Female"){
                $itemsf[]=$finfo['item'];
                $itemsidf[]=$finfo['id'];
            }
        elseif($finfo['type']=="Common"){
                $itemsc[]=$finfo['item'];
                $itemsidc[]=$finfo['id'];
            }           

        elseif($finfo['type']=="Other"){
            $itemso[]=$finfo['item'];
            $itemsido[]=$finfo['id'];

            }
    }

}    else{echo "ERROR !<br>";}
//print_r($itemsm);
?>

<div class="scrolltop"><h4>Go to Top</h4></div>
<div class="clothesform">
        <form action="place-order" method="post" name="orderform" id="orderform">

        <div><label for="phone">Phone </label> 
                <?php include('jqueryserverphone.php');?>
                        <div style="clear:both"></div>
        </div>      
        <div style="clear:both"></div>
                <h3>Order Details</h3>  
                        <div class="male">      
                            <h4>Male</h4>
                            <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div>
                            <?php 
                            $result=$orderdb->query("SELECT * FROM rates ORDER BY item");

                            for($i=0;$i<count($itemsm);$i++)
                            {
                                $itemname= strtolower(preg_replace('/[^(\x20-\x7F)]*/',"",$itemsm[$i]));
                                $itemname=str_replace(array("_"," ","/"),"",$itemname);
                                $itemlabel=ucfirst($itemsm[$i]);
                                $itemlabelname=$itemname."lbl";
                                ?>      

                            <div>
                                <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?><input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
                                <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>"
                                 <?php if(isset($_POST[$itemname])){echo  " value='$_POST[$itemname]'";}else{echo " value='0'";}?>>
                                <div id="<?php echo $itemname."cost";?>" class="ittot">
                                    <?php
                                        include('testfunct.php');
                                    ?>
                                </div>
                                <div style="clear:both"></div>
                            </div>
                            <?php   } ?>
                        </div>

                        <div class="female">
                                <h4>Female</h4>
                                <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div>
                                <?php
                                for($i=0;$i<count($itemsf);$i++)
                                {       
                                $itemtitle=$itemsf[$i];
                                $itemname= strtolower(str_replace("_","",preg_replace('/[^(\x20-\x7F)]*/',"",$itemsf[$i])));
                                $itemname=str_replace(array("_"," ","/"),"",$itemname);
                                $itemlabel=ucfirst($itemsf[$i]);
                                $itemlabelname=$itemname."lbl";

                                ?>

                                <div>
                                    <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
                                    <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>"
                                     <?php if(isset($_POST[$itemname])){echo  " value='$_POST[$itemname]'";}else{echo " value='0'";}?>>
                                    <div id="<?php echo $itemname."cost";?>" class="ittot">
                                        <?php
                                        include('testfunct.php');
                                    ?>
                                    </div>
                                    <div style="clear:both"></div>
                                </div>

                                <?php   } ?>

                        </div>

                        <div class="common">
                                <h4>Common Apparel</h4>
                                <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div>
                                <?php
                                if(!empty($itemsc)){
                                for($i=0;$i<count($itemsc);$i++)
                                {       
                                $itemtitle=$itemsc[$i];
                                $itemname= strtolower(str_replace("_","",preg_replace('/[^(\x20-\x7F)]*/',"",$itemsc[$i])));
                                $itemname=str_replace(array("_"," ","/"),"",$itemname);
                                $itemlabel=ucfirst($itemsc[$i]);
                                $itemlabelname=$itemname."lbl";

                                ?>

                                <div>
                                    <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label> 
                                    <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>"
                                     <?php if(isset($_POST[$itemname])){echo  " value='$_POST[$itemname]'";}else{echo " value='0'";}?>>
                                    <div id="<?php echo $itemname."cost";?>" class="ittot">
                                    <?php
                                        include('testfunct.php');
                                    ?>
                                    </div>
                                    <div style="clear:both"></div>
                                </div>

                                <?php   } 
                                }?>

                        </div>


                        <div class="others">
                                <h4>Household and Others</h4>
                                <div class="colhead1">Item</div><div class="colhead2">Qty</div><div class="colhead3">Cost</div><div style="clear:both"></div>
                                <?php
                                for($i=0;$i<count($itemso);$i++)
                                {
                                $itemtitle=$itemso[$i];
                                $itemname=strtolower(preg_replace('/[^(\x20-\x7F)]*/',"",$itemso[$i]));
                                $itemname=str_replace(array("_"," ","/"),"",$itemname);
                                $itemlabel=ucfirst($itemso[$i]);
                                $itemlabelname=$itemname."lbl";

                                ?>

                                <div>
                                    <label for="<?php echo $itemname;?>"><?php echo $itemlabel;?> <input type="hidden" name='<?php echo $itemlabelname;?>' value="<?php echo $itemlabel;?>"> </label>
                                    <input type="number" data-validation="number" name ="<?php echo $itemname;?>" class="clothesqty" id="<?php echo $itemname;?>"
                                    <?php if(isset($_POST[$itemname])){echo  "value='$_POST[$itemname]'";}else{echo "value='0'";}?>>
                                    <div id="<?php echo $itemname."cost";?>" class="ittot">
                                    <?php
                                        include('testfunct.php');
                                    ?>

                                    </div>
                                    <div style="clear:both"></div>
                                </div>

                                <?php   }   ?>
                                <div style="clear:both"></div>
                            </div>
                            <div style="clear:both"></div>
                        <div id="totalcost"><?php 
                            if(isset($_POST)){
                                totitem($_POST);
                                //echo $p;  
                                //totcost();
                            }else{echo "0";}
                        ?></div>
                        <div style="clear:both"></div>          
                    <div class="submit"><input Type="submit" name="clothessub" value="Place Order"></div>   
        </form>
    </div>
    <script type="text/javascript"> var item= <?php echo json_encode($arraytable); ?>;</script>

testfunct.php 文件是我调用前面提到的总函数的地方。

json_encode 变量与这部分问题无关。它只是为了不同的目的将变量传递到我的外部js文件。

编辑

实际形式为here 。我已将编辑时的表单值重置为零，因为总项目值会产生上述问题，否则

Answer 1

当您进入确认步骤时，您将看到一个带有隐藏输入字段的表单 ( <form action="register" method="post"> )，其中保存输入的值。然后，当您返回编辑订单时，此表单会消失，但只是在视觉上 - 代码位于源代码中，隐藏的输入字段也位于其中，其中包含所有值。然后，当在 keyUp 上调用calculateSum()时，将计算所有输入字段的总和，包括相加的隐藏字段。

一种解决方案是将选择器从“input”更改为“input[type=number]”:您的代码:

$("input").each(function() {
    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) {
        sum += eval(parseInt(this.value));
    }
});

将其更改为:

$("input[type=number]").each(function() {
    //add only if the value is number
    if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) {
        sum += eval(parseInt(this.value));
    }
});