重复使用JavaScript函数_Javascript_Php_Jquery_Html

重复使用JavaScript函数

javascript php jquery html

重复使用JavaScript函数,javascript,php,jquery,html,Javascript,Php,Jquery,Html,创建蛋糕订购表，每个月的可用蛋糕数量可能会有所不同。我试图调整从@Anderson Contreira创建的JS函数，但在我的小提琴中，它不起作用。以下是我到目前为止所做的-为什么输入数量时没有任何变化语法 JS function calculate(el){ var quantity = el.val(); var id = el.attr("id").replace("item_","").replace("_qty",""); var data = {q

创建蛋糕订购表，每个月的可用蛋糕数量可能会有所不同。我试图调整从@Anderson Contreira创建的JS函数，但在我的小提琴中，它不起作用。以下是我到目前为止所做的-

为什么输入数量时没有任何变化

语法 JS

    function calculate(el){
    var quantity = el.val();
    var id = el.attr("id").replace("item_","").replace("_qty","");
    var data = {quantity: quantity,id:id};
    var targetTax = $("#item_"+id+"_tax");
    var targetTotalPrice = $("#item_"+id+"_totalprice");
    $.post($.post(window.alert("It's been one or two or three entered");
    });
}
var qty = $("#item_1_qty");
var qty1 = $("#item_2_qty");
var qty2 = $("#item_3_qty");
qty.on("keyup",function(){
    window.alert("It's been one or two or three entered");
});

HTML/PHP

<body>
<form id="Form1" runat="server">
    <div id="Form1" runat="server">
    <table id="table1" border="1">
        <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Tax</th>
            <th>Total</th>
        </tr>
        <tr>
            <td><label for="lblChoccake">Choc Cake</label></td>
            <td><label for="lblitem1price">$25.00</label></td>
            <td><input  type="text" id="item_1_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
            <td><input  type ="text" id="item_1_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
            <td><input  type="text" id="item_1_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
        </tr>
        <tr>
            <td><label for="lblLemonFudgecake">Lemon Fudge Cake</label></td>
            <td><label for="lblitem2price">$15.00</label></td>
            <td><input  type="text" id="item_2_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
            <td><input  type ="text" id="item_2_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
            <td><input  type="text" id="item_2_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
        </tr>
        <tr>
            <td><label for="lblCoconut">Coconut Cake</label></td>
            <td><label for="lblitem3price">$35.00</label></td>
            <td><input  type="text" id="item_3_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
            <td><input  type ="text" id="item_3_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
            <td><input  type="text" id="item_3_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
        </tr>
    </table>
    </div>
</form>
</body>


项目
价格
量
税
全部的
巧克力蛋糕
$25.00
柠檬软糖蛋糕
$15.00
椰子蛋糕
$35.00

尝试这样做，您将在文档实际加载之前分配变量

看看这里：

您可以进行一些更改，并且可以很好地工作：

在项目数量的每个输入中添加一个类，例如：

在javascript中，您可以将调用保留为通用：

jQuery(document).ready(function(){
    //you can use a class for help you
    $(".item_qty").on("keyup",function(){
    //window.alert("It's been one or two or three entered");
    calculate($(this));
    });
});

请看这里：

您可以进行一些更改，并且可以很好地工作：

在项目数量的每个输入中添加一个类，例如：

在javascript中，您可以将调用保留为通用：

jQuery(document).ready(function(){
    //you can use a class for help you
    $(".item_qty").on("keyup",function(){
    //window.alert("It's been one or two or three entered");
    calculate($(this));
    });
});

您似乎没有在任何地方调用

calculate（）

。你的提琴不起作用，因为它不包含jQuery-试试这个版本：（尽管即使这样，keyup处理程序也只适用于第一个数量字段）。@nnnnnn我相信OP指的是警报函数不起作用，但你是对的。这应该在报告中提到question@nnnnnn-仅当为第一个项目输入数量时，才会显示提示，后续项目则忽略。是。因为这就是你写的代码。只能对第一项调用

.on（）

。你可以在（…）上说：<代码>$（“#项目1_数量，#项目1_数量，#项目1_数量”）。如果

calculate（）

函数与您所询问的内容无关，请不要将问题显示出来。@nnnnnn-哦，您说得对，谢谢您似乎没有在任何地方调用

calculate（）

.on（）

。你可以在（…）上说：<代码>$（“#项目1_数量，#项目1_数量，#项目1_数量”）。如果

calculate（）

函数与您所询问的内容无关，请不要将您的问题显示出来。@nnnnnn-哦，您是准确的，谢谢您错过了

.on（）

和

上的结束

和jQuery（）
上的结束（以及缺少空格…@nnnnnn谢谢，我在移动设备上，一旦我可以访问我的计算机，我会编辑它。感谢您的审阅。您缺少.on（）
上的结束语）
和jQuery（）
上的结束语（以及缺少空格…）@nnnnnn谢谢，我现在在移动设备上，一旦可以访问我的计算机，我会编辑它。谢谢你的评论。