-1

一種の PC ビルダーを作成しようとしていますが、ドロップ ダウン リストを使用すると、価格が更新されません。

$(document).ready(function() 
{     
var total = 0; //Base price

function calcTotal() 
{ 
$("select").each(function() 
{ 
    //This happens for each checked input field 
    var cost = $(this).val(); //I beleive the problems are here and...
    total += parseInt(cost); //total = total + cost             
   }); 
}       

//This happens when the page loads 
calcTotal();     
$("form").before('<p class="total">Base Price of Your Custom PC: <strong>£' + total + '</strong></p>'); 
$(":submit").before('<p class="total">Base Price of Your Custom PC: <strong>£' + total + '</strong></p>'); 

$("input:checkbox, input:radio").click(function() //... and problem here?
{ 
    total = 0;  //Base price
    calcTotal(); 
    $("p.total").html("Total Cost of Your Custom PC: <strong>£" + total + "</strong>"); 
}); 

});

ここに私のhtml; 

<head>
<title>Test - PC Builder</title>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1")</script>
<script src="t.js" type="text/javascript"></script>
</head>

<body>

    <form action="###" method="post">

Choose an Operating System
<input type="hidden" value="1" name="qty1">
<select name="productpr1">
<option value="Case A:10">---</option>
<option cost="25" value="Win 7:25">Win 7 (add £25)</option>
<option cost="50" value="Win 8:50">Win 8 (add £50)</option>
</select>
<br>
Choose a Case
<input type="hidden" value="1" name="qty2">
<select name="productpr2">
<option value="Case A:10">---</option>
<option cost="10" value="Case A:10">Case A (add £10)</option>
<option cost="15" value="Case B:15">Case B (add £15)</option>
</select>

        <!-- Send Button -->
        <input name="return" type="hidden" value="#">
        <input type="submit" value="Buy Now!">


    </form>

</body>
</html>

計算を実行するための値として使用cost=""していますが、html ページをロードする£NaNと、価格の値が得られますか? これは別の関数に使用されるため、value 属性を使用できません。

誰でも助けることができますか？

http://jsfiddle.net/T3T7v/5を参照してください

4

2 に答える 2

0

わかりました、ここで多くのことが起こっているので、別の答え:

まず、次を使用して、すべての選択から選択したオプションを取得しようとしています。

 $('select').each(function() {/*...*/});

うまくいかない。:selectedを使用する必要があります

 $(':selected').each(function() {/*...*/});

その中で、選択したオプションに値がない場合 (デフォルト) を処理する必要もあります。私は一緒に行きます：

 var id = $(this).attr('id');
 if(typeof id !== 'undefined')
 {
     total += parseInt(id, 10); // Note: always supply a base when using parseInt
 }

おそらくもっときちんとした方法がありますが。があったことにも注意してくださいparseInt('id')。これは間違っています。idstring ではなく、変数の値を解析したい'id'。

最後に、次の行：

$('').change(function() //Error must be here?

明らかに、次のようにする必要があります。

$('select').change(function()

全体として、構造も多少変更する可能性がありますが、それは別の日の話です。ここで jsFiddle を使用: http://jsfiddle.net/T3T7v/12/

于 2012-12-25T16:34:20.113 に答える
0

cost属性の値が必要な場合は、$(this).attr('cost')代わりに使用する必要があります$(this).val()- jQuery のattr()を参照してください。

そうは言っても、コストは明らかに有効な html 属性ではありません。使用は避けるべきです。カスタム属性を使用する必要がある場合は、使用する必要がありますdata-cost- data-* attributesを参照してください。

将来的には、 FirebugやWebkit Inspectorなどのツールを使用して JS を介してデバッグし、console.log()ステートメントを自由に使用して問題をある程度絞り込むことをお勧めします。

于 2012-12-21T00:21:59.560 に答える