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");

}

Answer 2

您可以使用事件侦听器并调用preventDefault（）函数来停止本机事件，而不是html文档中的'onclick'事件。样品：

document.getElementById('location').addEventListener("click", function(e){
    e.preventDefault();
    addUrl(this);
});

addUrl函数：

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);

            window.location.href = $(element).attr("href") + '?lat=' + lat + '&lng=' + lng;
        });
    }

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

带附加参数的按钮（不是ajax）

2 个答案: