重新使用 JavaScript 函数

Question

创建蛋糕订购表，可用蛋糕的数量可能因月而异。我正在尝试调整从@Anderson Contreira 创建的 JS 函数，但在我的 fiddle 中它不起作用。这是我目前所知道的 -

为什么我输入数量后没有任何变化？

语法 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">.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">.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">.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>

Answer 1

jQuery(function($) {

  var qty = $("#item_1_qty");
  var qty1 = $("#item_2_qty");
  var qty2 = $("#item_3_qty");

  qty.on("keyup",function(){
    alert("It's been one or two or three entered");
  });
});

试试这个，您在文档实际加载之前分配变量。

Answer 2

看这里：https://jsfiddle.net/andersoncontreira/mtu6syby/1/

您可以进行一些更改并且效果很好：

在 item_?_qty 的每个输入中添加一个 class 例如：<input type="text" id="item_1_qty" class="item_qty" />

在您的 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 函数

Re-Using JavaScript Function

html

javascript

php

jquery