jQuery计算不起作用

我有一个问题，使jquery计算插件的工作。我一直在无休止地尝试，并且由于缺乏JavaScript知识，这一直非常困难。jQuery计算不起作用

这里是我的代码：

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

我在做什么错？

来源

2011-11-17 user1052259

当你输入密码，不要把它在'输入代码在这里'块之后，把它放在那里。 – Brandon

嗯可能从包括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() { 
}

来源

2011-11-17 16:56:51 Peter

+1大声笑我们已经在某处或那些地方 – ManseUK

首先您需要阅读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>

来源

2011-11-17 17:01:45 Galled

，可能需要将绑定放在'$（document）.ready（function（）{... {）;' – ManseUK

是啊！我也忘记了！ – Galled

感谢您的所有反馈！ – user1052259

jQuery计算不起作用

回答

相关问题