我一直在网上搜索我的问题的解决方案,但还没有成功。我希望有人能够帮助我克服我遇到的这个障碍,或者为我指明正确的方向。
我正在为玩家创建一个在线注册表。到目前为止,当我使用 jquery 的日期选择器选择出生日期时,它将根据我设置的特定日期返回用户的正确年龄。我正在使用 switch 语句根据所选年龄在网页上显示正确的部门名称和价格值。
到目前为止一切似乎都正常工作。
我现在的问题是,我似乎无法将每个价格的值作为目标,以创建一个将每个价格相加得出总计的函数。
取 self 的 php 文件的 HTML 部分:
<div>
<div>
<label for="player-birthdate-1">Birthdate</label>
<input type="text" class="default-input" id="datepicker1" value="">
</div>
<div>
<label for="player-division-1">Division</label>
<input type="text" id="playerDivision1" value="" disabled>
</div>
<div>
<p id="playerFee1" class="fee" value=""></p>
</div>
</div>
<div>
<div>
<label for="player-birthdate-2">Birthdate</label>
<input type="text" class="default-input" id="datepicker2" value="">
</div>
<div>
<label for="player-division-2">Division</label>
<input type="text" id="playerDivision2" value="" disabled>
</div>
<div>
<p id="playerFee2" class="fee" value=""></p>
</div>
</div>
<div>
<p id="total" value=""></p>
</div>
部分取 self 的 php 文件,其中我从数据库中获取部门名称和价格:
<script>
var divisions = {
<?php
$sql = $db->prepare("SELECT * FROM division");
$sql->execute();
$results = $sql->fetchAll(PDO::FETCH_OBJ);
foreach ($results as $division) :
?>
'<?php echo $division->division_id; ?>' : {
id : '<?php echo $division->division_id;?>'
,name : '<?php echo $division->division_name;?>'
,price : '<?php echo $division->division_price;?>'
},
<?php endforeach; ?>
}
</script>
从我的 js 文件中获取的日期选择器和总费用代码:
$(document).ready(function() {
$( '#datepicker1' ).datepicker({
onSelect: function(value, ui) {
var newDate = new Date("April 30, " + (new Date()).getFullYear()),
dob = $("#datepicker1").datepicker("getDate"),
age = new Date(newDate - dob).getFullYear() - 1970;
$('#age').val(age);
console.log(age);
switch (age){
case 5:
case 6:
$("#playerDivision1").val(divisions['1'].name);
$("#playerFee1").html(divisions['1'].price);
break;
case 7:
case 8:
$("#playerDivision1").val(divisions['2'].name);
$("#playerFee1").html(divisions['2'].price);
break;
//continues on for the remaining of the ages.....
},
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1990:2012'
});
$( '#datepicker2' ).datepicker({
onSelect: function(value, ui) {
var newDate = new Date("April 30, " + (new Date()).getFullYear()),
dob = $("#datepicker1").datepicker("getDate"),
age = new Date(newDate - dob).getFullYear() - 1970;
$('#age').val(age);
console.log(age);
switch (age){
case 5:
case 6:
$("#playerDivision2").val(divisions['1'].name);
$("#playerFee2").html(divisions['1'].price);
break;
case 7:
case 8:
$("#playerDivision2").val(divisions['2'].name);
$("#playerFee2").html(divisions['2'].price);
break;
//continues on for the remaining of the ages.....
},
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
yearRange: '1990:2012'
});
$('.fee').html(function(){
var total = 0;
$('.fee').each(function(){
var fee = parseFloat($(this).val());
if (isNaN(fee)) {fee = 0;}
total+= fee;
$('#total').html('$' + total);
});
});
});
我期待论坛上的人提供建议。非常感谢任何帮助或插入正确的方向! :)
最佳答案
你做得很好,并且已经通过给每个人一类“费用”让它变得简单,但我假设你想要 parseFloat 数字,而不是 parseInt(以防费用中有美分?)。
此外,您需要检查它是否为 isNaN(不是数字),否则将无法正常工作。 这是一个简单的添加问题:
if (isNaN(fee)) {fee = 0;}
最后,您似乎是在“更改”事件上执行此操作。我在 keyup 事件中运气更好。
关于php - 如何使用 jQuery 计算输入字段的总成本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9144073/