javascript - 带有附加参数的按钮(非 ajax)

Question

我有一个按钮可以将搜索结果过滤到最近的位置。

我的 html 按钮

<a href="trending" onclick="addUrl(this); alert(this);" class="btn btn-warning" id="location">Nearest Location</a>

我的jquery

function addUrl(element){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            console.log(lat);
            console.log(lng);

            $(element).attr('href',function(){
                return element.href + '?lat=' + lat + '&lng=' + lng;
            });


        });
    }

    else
        alert("navigator.geolocation is not available");
}

当我单击按钮时，似乎导航到不带参数的网址。不确定这里出了什么问题。

Answer 1

问题在于 geolocation.getCurrentPosition 函数是异步的，因此实际上您的代码在执行重定向操作后更改了 href 属性。您可以禁用默认链接点击操作(在点击事件处理程序中使用 e.preventDefault() 或 return false)并在 geolocation.getCurrentPosition 回调中使用window.location.href = YOUR_URL_WITH_PARAMS 这将导致重定向。

document.getElementById('location').addEventListener("click", function(e){
    e.preventDefault();
    var href = e.target.href;
    addUrl(href);
});

function addUrl(href){
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function(position){
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            console.log(lat);
            console.log(lng);
            window.location.href = href + '?lat=' + lat + '&lng=' + lng;


        });
    }

    else
        alert("navigator.geolocation is not available");

}