Question

我在使jquery计算插件工作时遇到问题。我一直在无休止地尝试，由于我缺乏javascript知识，这一直非常困难。

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>

<body>


<table width="500">
<col style="width: 50px;" />
<col />
<col style="width: 60px;" />
<col style="width: 110px;" />
<tr>
    <th>
        Qty
    </th>
    <th align="left">
        Product
    </th>
    <th>
        Price
    </th>
    <th>
        Total
    </th>
</tr>
<tr>
    <td align="center">
        <input type="text" name="qty_item_1" id="qty_item_1" value="1" size="2" />
    </td>
    <td>
        Bottle 1
    </td>
    <td align="center" id="price_item_1">
        £29.00
    </td>
    <td align="center" id="total_item_1">
        £29.00
    </td>
</tr>
<tr>
    <td align="center">
        <input type="text" name="qty_item_2" id="qty_item_2" value="1" size="2" />
    </td>
    <td>
       Bottle 2
    </td>
    <td align="center" id="price_item_2">
        £60.00
    </td>
    <td align="center" id="total_item_2">
        £60.00
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total:</strong>
    </td>
    <td align="center" id="grandTotal">
    </td>
</tr>
</table>

<script type="text/javascript">


$("input[name^=qty_item_]").bind("keyup", recalc);


    $("[id^=total_item]").calc(
        "qty * price",
        {
            qty: $("input[name^=qty_item_]"),
            price: $("[id^=price_item_]")
        },
        function (s){
            return "£" + s.toFixed(2);
        },
        function ($this){
            var sum = $this.sum();

            $("#grandTotal").text(
                "£" + sum.toFixed(2)
            );
        }
    );


</script>


</body>
</html>

我做错了什么？

Answer 1

嗯，也许从包含jQuery开始？

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

如果没有jQuery，你不能使用jQuery：））

然后你还需要包含计算插件（将其复制到你的文件夹，不要热链接！）

<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>

最后你的脚本：

$("input[name^=qty_item_]").bind("keyup", recalc);

function recalc() {
    $("[id^=total_item]").calc(
        "qty * price",
        {
            qty: $("input[name^=qty_item_]"),
            price: $("[id^=price_item_]")
        },
        function (s){
            return "£" + s.toFixed(2);
        },
        function ($this){
            var sum = $this.sum();

            $("#grandTotal").text(
                "£" + sum.toFixed(2)
            );
        }
    );
}

你错过了：

function recalc() {
}

Answer 2

首先，您需要阅读the documentation of jquery以及如何在网页中使用。

您需要调用jquery库，就像这样（在<body>或<head>的末尾）：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>

然后你需要调用jquery.calc插件（不要先忘记downloading !!!）。最后，您必须得到类似的结果（在<body>或<head>的末尾）：

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="yourJsFolderPath/jquery.calculation.min.js"></script>

然后才打电话给你：

<script type="text/javascript">

    $(document).ready(function(){ //In the documentation talk about of this 
                                  //but I recommend to you, use this function 
                                  //that make that all the things are inside 
                                  //are called at the "body onload".

        var recalc = function (){
            /*  do your stuff when a user "keyup" in a 
                input with a name with something
                like qty_item_
            */
        };

        $("input[name^=qty_item_]").bind("keyup", recalc);

        $("[id^=total_item]").calc(
            "qty * price",
            {
                qty: $("input[name^=qty_item_]"),
                price: $("[id^=price_item_]")
            },
            function (s){
                return "£" + s.toFixed(2);
            },
            function ($this){
                var sum = $this.sum();

                $("#grandTotal").text(
                    "£" + sum.toFixed(2)
                );
            }
        );
    });
    </script>

jQuery计算不起作用

2 个答案: