2012-02-11 18 views
-3

私はこれでどこが間違っていたのか分かりません。Jquery追加デバッグ

好きな シェア[G +]シェア[FB]共有[TW]

私は個人的な使用のための小さな店としてウェブサイトを作成しています、ここでは私の主な質問は、私はadditonのための機能をコーディングする方法をありますそれのすべての?

プリンタ、モニタ、モデム、または他の使い慣れたデバイスを含むさまざまなタイプの周辺デバイス用の6つのチェックボックス。基本的なコンピュータシステムの価格を$ 500.00とし、ユーザーのチェックに基づいて適切な価格を追加します。 モニタ299.99プリンタ129.99スピーカ49.99 CDRW 159.99スキャナ129.99モデム49.99

スキャナを追加すると、合計は629.99ドルになります。モデムとモニタを追加すると、私の合計は$ 849.98になります。

私は単純なものを見落としているかもしれません。私がチェックボックスをクリックすると、それは想定されているような合計に追加されません。 JavaScriptコンソールを見ると

<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

何が問題なのですか? –

+1

あなたの質問には、問題またはトピックを説明する特定のタイトルを記入してください。 "私が間違っていたことを理解できません"は、Stack Overflowに関する質問の少なくとも50%を説明しています。 – DNA

+0

これは基本的にあなたが記述しているように見えます。 http://jsfiddle.net/RGkXY/ –

答えて

2

、私はそれが定義されていない$に関するエラーを持っているでしょう賭けます。これは、jQuery jsファイルに正しくリンクしていないためです。

<script type="text/javascript" src="code.jquery.com/jquery-1.7.1.min.js"></script> 
ファイルシステムをこのオフを実行している場合は、私が //

JSFiddle

を追加 それはあなたのドメイン上でそれを探している

、ないjQueryの

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

通知とサーバーではなく、追加する必要があります。http://

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

正しいプロトコルを使用してファイルを取得するか、ファイルをダウンロードしてローカルにリンクするだけです。

+0

私のためにそれを修正しませんでした。 問題9 ます。 ます。