javascript - 隐藏的 'lat' 和 'lng' 字段未删除，因此我的脚本仍在从不正确的地理位置搜索 lat 和 lng 结果

Question

我有一个页面，用户可以在“邮政编码”字段中输入他们的地址。我还有一个“检测位置”按钮，可以对用户地址进行地理定位。当他们单击此按钮时，他们的城市名称和邮政编码将回显到“邮政编码”字段中，并且纬度和经度将传递到两个动态创建的隐藏输入字段。我的页面上还有 Places API。

回显地址和邮政编码并创建隐藏字段的代码如下:

if (results[1]) {
    split1 = results[1].formatted_address.split(', ');
    // echo the geolocation address into the 'zipcode' input field
    document.getElementById('zipcode').value = split1[1] + ', ' + split1[2]; // city name and postcode
    // if hidden lat and lng fields are present from Places API, remove them
    $(".storelocator_body form").find("input.geomtery").remove();
    // produce new hidden fields with the new lat and lng values
    $(".storelocator_body form").append("<input type='hidden' class='geomtery' name='lat' value='" + lat + "'>");
    $(".storelocator_body form").append("<input type='hidden' class='geomtery' name='lng' value='" + lng + "'>");
} else {
    alert("No results found");
}

我遇到的问题是，有时地理位置会给出虚假结果，特别是当我在没有无线卡的桌面上进行搜索时。当我手动将“邮政编码”输入字段更改为正确的地址时，隐藏的“lat”和“lng”字段并未删除，因此我的脚本仍在从不正确的地理位置搜索 lat 和 lng 结果。

我想出的解决方案如下:

if(document.getElementsByClassName("geomtery")){
    $("#zipcode").on("input",function(e){
        $(".storelocator_body form").find("input.geomtery").remove();
    });
}

我的想法是，如果用户开始在“邮政编码”输入字段中输入甚至粘贴新地址，并且已经存在隐藏的“lat”和“lng”字段，那么这些字段就会被删除。

你觉得怎么样？我是否以最好的方式做到了这一点？我是编码新手，希望得到一些反馈。非常感谢。

Answer 1

何必为难自己呢？您可以简单地检测字段是否存在(或者更好的是，将它们直接包含在 HTML 中)，然后更改它们的值，而不是每次都进行 DOM 插入。

 // here your Places code, field as optional parameter (to retrieve from zipcode afterwards)  
function placesAPIcall(field) { [...] return { lat: 'value', long: 'value'}}
// on page load
function initPlaces() {
   var result = placesAPIcall(), lat = result.lat, lng = result.lng;
   if (!$('.geomtery[name=lat]').length)
      $('.storelocator_body form').append('<input type="hidden" class="geomtery" name="lat" value="' + lat + '">');
   if (!$('.geomtery[name=lng]').length)
      $('.storelocator_body form').append('<input type="hidden" class="geomtery" name="lng" value="' + lng + '">');
}
// everytime #zipcode loses focus, value updates
function updateLatLong() { 
   var result = placesAPIcall($('#zipcode')), lat = result.lat, lng = result.lng;
   $('.geomtery[name=lat]').val(lat); // set the value
   $('.geomtery[name=lng]').val(lng); // set the value

});
$('#zipcode').on({'change': updateLatLong, 'load': initPlaces});

一些提示:

• 选择单引号 ( " ) 和双引号 ( ' ) 并保持一致。
  我个人总是使用"对于 HTML 和 '对于JS。
• 据我所知，没有 input jQuery 中的事件，使用change或keyup或表格submit相反。
• 您发送了e (事件)作为函数中的参数:您应该只包含您需要的参数(在本例中没有)，否则可能会让阅读您代码的其他人感到困惑。
• 一致的编码风格:如果您选择使用 jQuery，则使用像 document.getElementsByClassName 这样的原生 JS 函数是没有意义的。因为它在 IE8 和 jQuery 更简单的类选择器中不起作用 $('.class')相比之下，确实如此。
• geomtery是几何错别字吗？