如何检查字段是否已动态填充
How to check if a field has been populated dynamically?
我用谷歌地图做了一个计算器,显示出发地和目的地之间的固定价格。
但是,只有在留下输入并单击地图或div后,价格才会显示。
$(document).ready(function(){
function initMap() {
var latlng = new google.maps.LatLng(52.379189, 4.899431);
var mapOptions = {
center: latlng,
zoom: 11,
mapTypeControl: false,
streetViewControl: false,
styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
function drivingRoute(from, to) {
var request = {
origin: from,
destination: to,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC
};
if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
directionsService.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
var totalKM = Math.round(response.routes[0].legs[0].distance.value / 1000);
var distanceText = totalKM+' km';
$('#controls p').text(distanceText);
var stadsdeelTest = document.getElementById('stadsdeel').value;
if (stadsdeelTest=='Centrum') {
var charges= '€ '+ 32;
}
else if (stadsdeelTest=='Amsterdam-Oost') {
var charges= '€ '+ 35;
}
else if (stadsdeelTest=='Oud-Zuid') {
var charges= '€ '+ 30;
}
$('#controls h2').text(charges);
drivingLine = new google.maps.Polyline({
path: response.routes[0].overview_path,
strokeColor: "#b00",
strokeOpacity: .75,
strokeWeight: 5
});
drivingLine.setMap(map);
map.fitBounds(response.routes[0].bounds);
}
else {
$('#controls p').addClass('error');
}
});
}
$('input').blur(function(){
drivingRoute(
$('input[name=from]').val(),
$('input[name=to]').val()
);
});
$(function(){
$("#geocomplete").geocomplete({
details: "form",
types: ["address"],
country: 'nl'
});
$('input').blur(function(){
$("#geocomplete").trigger("geocode");
});
});
var map;
var drivingLine;
var directionsService = new google.maps.DirectionsService();
initMap();
$('input[name=to]').val('Schiphol');
$('input[name=from]').trigger('blur');
});
// Autocomplete
var fromText = document.getElementById('geocomplete');
var cityBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.379189, 4.899431));
var options = {
bounds: cityBounds,
types: ['geocode'],
componentRestrictions: {country: 'nl'}
};
// google.maps.event.addListener(autocomplete, 'place_changed', function() {
// window.alert("you selected an item from suggestion list");
// });
$( "input" ).change(function() {
document.getElementById("bestemming").focus();
return false;
});
document.getElementById('geocomplete').onkeypress = function (e) {
if (e.which === 13) {
document.getElementById("bestemming").focus();
return false;
}
};
示例:http://codepen.io/anon/pen/rMEdKO/
尝试将"Damrak, Amsterdam, Nederland"放在出发字段上,然后点击地图。它显示了sublocality Centrum的价格。
将目的地改为"cetuurbaan, Amsterdam, Nederland"后,价格不会改变,只有在点击地图后才会改变。
我想在填写目的地后显示价格,如果用户更改了目的地。价格必须自动调整
不是使用get blur
事件,而是在input
上尝试change
事件
//This is what you have
$('input').blur(function(){
drivingRoute(
$('input[name=from]').val(),
$('input[name=to]').val()
);
});
//Remove/modify the code above and try this
$('#geocomplete').bind('input', function() {
drivingRoute(
$('input[name=from]').val(),
$('input[name=to]').val()
);
});
不完全确定这是否回答了你的问题。
相关文章:
- 如何动态检测Mozilla/Chrome上是否启用SSO
- 是否可以仅通过jQuery将图像替换为用户动态选择的另一个图像
- 是否可以在调用时动态设置Jquery Accordion的活动面板
- 根据手机上是否存在文件,在jQuery mobile中动态填充列表视图
- 在动态crm 2011中,右键单击已完成活动的只读文本时,您是否出现错误
- 如何使用JS检查AWS S3上是否存在动态创建的文件
- jQuery:如何查找id是动态生成的单选按钮是否被选中
- jsrender是否可以动态地呈现字段名
- 是否可以使用鼠标动态创建“html5画布”
- 如果标记是使用 JavaScript 动态构建的,Schema.org 标记是否有效?
- AngularJS中的动态表单验证 - 是否有更好的解决方案/方法
- 动态图像加载是否会减少服务器过载
- 如何检查所有文本框(包括动态添加的)是否为空
- 是否可以在动态添加的文本输入上全局捕获keydown
- 确定是否使用javascript定义动态选择
- 蜘蛛猴外壳.是否可以动态加载碎片库
- Symfony sfValidators:动态设置是否需要值
- 在动态创建html元素之后,是否可以触发事件
- 谷歌DFP动态广告刷新-是否有回调来确定广告是否已加载
- Facebook的内容是否动态加载