如何解决jQuery计算器不断返回NaN
嗨，我有一个Jquery计算器，但它一直返回NaN
任何人都可以帮忙
我确实阅读了其他有关类似问题的流程问题堆栈，并看到人们在说要将parseInt放入jquery中，我已经尝试过，但仍然得到NaN
请注意，我也有条件逻辑（确实起作用），但是为了节省放置100条与我的问题无关的代码行，我将其缩短了。
用户只能选择一个下拉选项，而不能全部选择。
/* * * * * * * * * * * * * * * * * *
* Calculator
* * * * * * * * * * * * * * * * * */
$(function() {
$("select.cover_question10").on("change",calc);
$("select.cover_question15").on("change",calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.cover_question10 option:selected,select.cover_question15").each(function() {
newPrice += parseInt($(this).data('price'),10);
});
var percentage = 0;
$("input[type=checkbox].calculate:checked").each(function() {
percentage += parseInt($(this).data('price'),10);
});
newPrice = newPrice + (newPrice * percentage / 100);
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
$("#price").val(newPrice);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>How long do you want the cover 10?</label>
<select class="select cover_question10" name="cover_question10" id="cover_question">
<option id="cover" value="Select">Select cover</option>
<option id="cover_12" value="cover_12" data-price="90.76" data-capacity="12 Months Cover">12 Months Cover </option>
<option id="cover_24" value="cover_24" data-price="124.50" data-capacity="24 Months Cover">24 Months Cover</option>
<option id="cover_36" value="cover_36" data-price="135" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br>
<label>How long do you want the cover 15?</label>
<select class="select cover_question15" name="cover_question15" id="cover_question">
<option id="cover" value="Select">Select cover</option>
<option id="cover_12" value="cover_12" data-price="104.26" data-capacity="12 Months Cover">12 Months Cover </option>
<option id="cover_24" value="cover_24" data-price="145.50" data-capacity="24 Months Cover">24 Months Cover</option>
<option id="cover_36" value="cover_36" data-price="195" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br> £
<span id="item-price">0.00</span>这也是我的小提琴
https://jsfiddle.net/0ajo48ne/
解决方法
<label>How long do you want the cover 10?</label>
<select
class="select cover_question10"
name="cover_question10"
id="cover_question"
>
<option id="cover" value="Select" data-price="0">Select cover</option>
<option
id="cover_12"
value="cover_12"
data-price="90.76"
data-capacity="12 Months Cover"
>
12 Months Cover
</option>
<option
id="cover_24"
value="cover_24"
data-price="124.50"
data-capacity="24 Months Cover"
>
24 Months Cover
</option>
<option
id="cover_36"
value="cover_36"
data-price="135"
data-capacity="36 Months Cover"
>
36 Months Cover
</option>
</select>
<br /><br />
<label>How long do you want the cover 15?</label>
<select
class="select cover_question15"
name="cover_question15"
id="cover_question"
>
<option id="cover" value="Select" data-price="0">Select cover</option>
<option
id="cover_12"
value="cover_12"
data-price="104.26"
data-capacity="12 Months Cover"
>
12 Months Cover
</option>
<option
id="cover_24"
value="cover_24"
data-price="145.50"
data-capacity="24 Months Cover"
>
24 Months Cover
</option>
<option
id="cover_36"
value="cover_36"
data-price="195"
data-capacity="36 Months Cover"
>
36 Months Cover
</option>
</select>
<br /><br />
£
<span id="item-price">0.00</span>
$(function () {
$("select.cover_question10").on("change",calc);
$("select.cover_question15").on("change",calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.cover_question10,select.cover_question15")
.find("option:selected")
.each(function () {
newPrice += parseInt($(this).data("price"),10);
});
var percentage = 0;
$("input[type=checkbox].calculate:checked").each(function () {
percentage += parseInt($(this).data("price"),10);
});
newPrice = newPrice + (newPrice * percentage) / 100;
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
$("#price").val(newPrice);
}
});
您在一个选择框上选择了所选选项，但在另一个选择框上选择了本身。这导致1个data-pirce属性始终为undefined。更正时。还添加了if语句来检查是否设置了有效值。
/* * * * * * * * * * * * * * * * * *
* Calculator
* * * * * * * * * * * * * * * * * */
$(function() {
$("select.cover_question10").on("change",calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.cover_question10 option:selected,select.cover_question15 option:selected").each(function() {
console.log();
if(/^[\.\d]+$/.test($(this).data('price'))) {
newPrice += parseFloat($(this).data('price'),10);
}
});
var percentage = 0;
$("input[type=checkbox].calculate:checked").each(function() {
percentage += parseInt($(this).data('price'),10);
});
newPrice = newPrice + (newPrice * percentage / 100);
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
$("#price").val(newPrice);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>How long do you want the cover 10?</label>
<select class="select cover_question10" name="cover_question10" id="cover_question">
<option id="cover" value="Select">Select cover</option>
<option id="cover_12" value="cover_12" data-price="90.76" data-capacity="12 Months Cover">12 Months Cover </option>
<option id="cover_24" value="cover_24" data-price="124.50" data-capacity="24 Months Cover">24 Months Cover</option>
<option id="cover_36" value="cover_36" data-price="135" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br>
<label>How long do you want the cover 15?</label>
<select class="select cover_question15" name="cover_question15" id="cover_question">
<option id="cover" value="Select">Select cover</option>
<option id="cover_12" value="cover_12" data-price="104.26" data-capacity="12 Months Cover">12 Months Cover </option>
<option id="cover_24" value="cover_24" data-price="145.50" data-capacity="24 Months Cover">24 Months Cover</option>
<option id="cover_36" value="cover_36" data-price="195" data-capacity="36 Months Cover">36 Months Cover</option>
</select>
<br><br> £
<span id="item-price">0.00</span>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
