你好，stackoverflow的人！我有一个小问题，过去两天一直在试图解决它......
故事部分：
我有通过按钮（并删除）动态生成的输入。输入被编程为使用谷歌API自动完成功能。沿着该行，我还有另一个盒子，用于存储两个输入（from，to）之间的距离。自动完成，添加，删除，距离计算器就像一个魅力。问题是将'.distance'结果输入中的值添加到页面底部的Grand Total输入中。基本上，我想计算驱动的总距离。我的代码只输出total的初始值，即'0'。尝试使用parseFloat将返回NaN。
代码部分：
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function addAutocompleteToField($field) {
var autocomplete = new google.maps.places.Autocomplete($field[0], { types: ['geocode'] });
google.maps.event.addListener(autocomplete, 'place_changed', function() {
$field.change();
})
}
//<![CDATA[
var map = null;
var directionsService = new google.maps.DirectionsService();
function computeTotalDistance(result) {
var total = 0,
myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
return total;
}
function calcRoute($row){
driveDistance = 0;
rate = 0;
taxes = 0;
lastmo = $('.lastmonth').val();
var start = $row.find('.from').val();
var end = $row.find('.to').val();
var request = {
origin : start,
destination : end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status){
if (status === google.maps.DirectionsStatus.OK) {
distance = computeTotalDistance(response);
select = $row.find('.driveType').children('.option').filter(' :selected').val();
if (select === "One way") {
driveDistance = formatDistance();
$row.find('.total input[type="hidden"]').val(distance).change();
$row.find('.distance').html(driveDistance);
}
else
{ driveDistance = 2 * formatDistance();
$row.find('.total input[type="hidden"]').val(distance * 2).change();
$row.find('.distance').html(driveDistance);
taxes = taxes * 2;
}
if (lastmo < 20000)
{
rate = 3.73;
}
else
{
rate = 2.10;
}
taxes = driveDistance * rate;
$row.find('.taxes').html(Math.floor(taxes));
// Find the .distance element and put the text inside it
}
});
}
function calcTaxes($row) {
totaDriveDistance = 0;
$row.find('.distance').each(function(){
totalDriveDistance = driveDistance;
})
}
function calcTotals($row){
var total = 0;
$row.find('.distance').each(function(){
total += +($(this).val());
});
$(".totalkm input").val(total.toFixed(2));
}
function formatDistance(distanceInMeters) {
distanceInMeters = Math.floor(distance / 1000);
return distanceInMeters;
}
// Add autocomplete functionality to a single row
function addRowEvents($row) {
$row
.find('.autocomplete').each(function () {
addAutocompleteToField($(this));
}).end();
}
$(function() {
$('.row-container')
.on('change', '.autocomplete', function() {
calcRoute($(this).closest('.row-holder'));
})
.on('change', '.driveType', function() {
calcRoute($(this).closest('.row-holder'));
})
.on('change', '', function() {
calcTaxes($(this).closest('.row-holder'));
})
.on('change', '.total', function() {
calcTotals($(this).closest('.row-holder'));
});
$('.row-container .row-holder').each(function() {
addRowEvents($(this));
});
var max = 50;
var count = $('.row-holder').length;
$(document).on("click", ".add" ,function() {
// Generate a new row with the maximum limit of 50
if (count <= max)
{
var $newRow = $($('.example-row').html());
// add autocomplete to the new row
addRowEvents($newRow);
$('.row-container').append($newRow);
count++;
}
});
$(document).on("click", ".remove", function () {
// Delete current row whitout deleting all of them (the first one remains at all times)
if (count > 2) {
$(this).parent().remove();
count--;
}
});
});
</script>
<legend><span class="glyphicon glyphicon-wrench"></span><strong>CREATE MILEAGE REPORT</strong></legend>
<input name="lastMonth" class="lastmonth form-control" type="text" placeholder="Last month mileage count" style="width: 20%;margin-bottom: 10px" />
<?php
function renderRow() {
return <<<HTML
<div class="row-holder form-inline form-group">
<button type="button" name="remove[]" class="remove btn btn-danger"><span class="glyphicon glyphicon-remove"></span></button>
<input name="date[]" class="date form-control" type="text" placeholder="Date" style="width: 10%" />
<input name="from[]" class="autocomplete from form-control" type="text" placeholder="From..." />
<input name="to[]" class="autocomplete to form-control" type="text" placeholder="To..." />
<input name="purpose[]" type="text" class="form-control" placeholder="Purpose" />
<select name="drivetype[]" class="form-control driveType" style="width: 10%;display: inline"><option class="option" value="One way">One Way</option><option class="option" value="Two way">Two Way</option></select>
<div class="total form-control">
<input type="hidden" name="distance[]" />
<span style="width: 100%" class="distance"></span> Km
</div>
<div class="totalkr form-control">
<input type="hidden" name="totalkr[]" />
<span style="width: 100%" class="taxes"></span> Kr
</div>
</div>
HTML;
}
?>
<div class="row-container">
<?php echo renderRow() ?>
</div>
<button type="button" class="add btn btn-success">
<span class="glyphicon glyphicon-plus"></span>
Add new mileage entry
</button>
<div class="hidden example-row">
<?php echo renderRow() ?>
</div>
<legend style="margin-top:20px"></legend>
<legend style="padding-bottom: 20px"></legend>
<span class="totalkm"><input type="text" value="" name="Total" placeholder="Total:" /></span>
<button type="button" style="float:right;margin-right:1%" class="btn btn-info">Save to table</button>
啊，phpfiddle的链接：http://phpfiddle.org/main/code/18tf-a8gb 任何帮助深表感谢！ 一帆风顺。
答案 0 :(得分：0)
我有一些问题，使用一些技巧修复
dist_val = $(this).text();
total += parseFloat(dist_val.toFixed(2));
我希望这能解决你的问题