Jquery补充调试

时间:2012-02-11 23:12:17

标签: javascript jquery

我似乎无法弄清楚我在哪里出错了。

喜爱 分享[g +]分享[fb]分享[tw]

我正在创建一个网站作为个人使用的小商店,我的主要问题是如何为所有这些的附加项编写函数?

六个单一复选框,适用于各种类型的外围设备,包括打印机,显示器,调制解调器或您熟悉的其他设备。假设基本计算机系统价格为500.00美元,然后根据用户检查添加适当的价格。 监视器299.99打印机129.99扬声器49.99 CDRW 159.99扫描仪129.99调制解调器49.99

如果我只添加扫描仪,我的总价将为629.99美元。如果我添加调制解调器和显示器,我的总价将为849.98美元。

我可能会忽略一些简单的事情。当我单击一个复选框时,它不会像它应该的那样添加到总数中。

<html>
<head>
<title>Problem 9</title>
<script type="text/javascript" src="code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
  function calculateCost() {
    var ret = 500;
    var $selected = $('input:checked', $peripherals);

    $selected.each(function() {
      ret += parseFloat($(this).attr('alt'));
    });

    return ret.toFixed(2);
  }

  function setCost() {
    $total.text(calculateCost());
  }

  var $peripherals = $('#peripherals');
  var $total = $('#total');
  $('input[type="checkbox"]', $peripherals).on('change', setCost);

  setCost();

});

</script>
<body>
<h1>What peripherals do you want to add?</h1>
<form id="peripherals">
    <input type="checkbox" name="Monitor" value="Monitor" alt="299.99">Monitor<br>
    <input type="checkbox" name="Printer" value="Printer" alt="129.99">Printer<br>
    <input type="checkbox" name="Speakers" value="Speakers" alt="49.99">Speakers<br>
    <input type="checkbox" name="CDRW" value="CDRW" alt="159.99">CDRW<br>
    <input type="checkbox" name="Scanner" value="Scanner" alt="129.99">Scanner<br>
    <input type="checkbox" name="Modem" value="Modem" alt="49.99">Modem<br>
</form>
<p>Total cost:<span id="total">0</span></p>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

看一下JavaScript控制台,我敢打赌,如果没有定义$会有错误。这是因为你没有正确链接到jQuery js文件。

 <script type="text/javascript" src="code.jquery.com/jquery-1.7.1.min.js"></script>

它正在你的域上寻找它,而不是jQuery的

 <script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.min.js"></script>

请注意我添加了//

JSFiddle

如果您从文件系统而不是服务器运行此功能,则需要添加http://

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

因此,它将使用正确的协议来获取文件,或者只是下载文件并在本地链接到它。