Question

我正在尝试创建一种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

Answer 1

如果您想要cost属性的值，则应使用$(this).attr('cost')代替$(this).val() - 请参阅jQuery的attr()。

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

将来，使用像Firebug或Webkit Inspector这样的工具以及console.log()语句的自由使用，可能需要通过JS进行调试，以稍微缩小您的问题范围。

Answer 2

好的，单独回答，因为这里有很多内容：

首先，您尝试使用以下方法从所有选项中获取所选选项：

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

使用jquery下拉选择自动更新需要帮助

2 个答案: