-1

我正在尝试创建一种 pc builder 但是在使用下拉列表时，它不会更新价格；

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

如果你想要cost属性的值，你应该使用$(this).attr('cost')而不是$(this).val()- 请参阅 jQuery 的attr()。

也就是说，成本显然不是一个有效的 html 属性。你应该避免使用它。如果您需要使用自定义属性，您应该使用data-cost-see data-* attributes。

将来可能值得使用Firebug或Webkit Inspector之类的工具通过您的 JS 进行调试，并自由使用console.log()语句来缩小您的问题范围。

于 2012-12-21T00:21:59.560 回答
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')，这是错误的。您想解析id变量的值，而不是字符串'id'。

最后，一行：

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

显然需要：

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

总的来说，我可能也会稍微改变结构，但这是另一天的故事。在这里工作 jsFiddle：http: //jsfiddle.net/T3T7v/12/

于 2012-12-25T16:34:20.113 回答