jQuery 计算不起作用

发布于 2024-12-16 17:29:17 字数 2307 浏览 2 评论 0原文

我在使用 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>

我做错了什么？

原文

I am having a problem making the jquery calculation plugin to work. I have been trying endlessly, and due to my lack of javascript knowledge, it has been quite difficult.

Here is my code:

<!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>

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

山人契 2024-12-23 17:29:17

嗯，也许从包含 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() {
}

Hmmm maybe start from including jQuery?

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

You can't use jQuery without jQuery :))

Then you need to include calculation plugin as well (copy it to your folder, don't hotlink!)

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

At last your 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)
            );
        }
    );
}

you was missing:

function recalc() {
}

回复收藏 0 原文

同展鸳鸯锦 2024-12-23 17:29:17

首先你需要阅读jquery的文档以及如何在网页中使用。

您需要调用 jquery 库，如下所示（在末尾或在中）：

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

然后您需要调用jquery.calc 插件（不要忘记先下载！！！）。最后你必须得到这样的东西（在的末尾或在中）：

<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>

First you need to read the documentation of jquery and how to use in a web page.

You need to call the jquery library, something like this (at the end of your <body> or in the <head>):

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

Then you need to call the jquery.calc plugin (don't forget downloading first!!!). Finally you has to get something like this (at the end of your <body> or in the <head>):

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

And only then call your:

<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>

回复收藏 0 原文

~没有更多了~