jquery根据geoIP隐藏第一个或第二个子元素
如果访问者来自美国,我想隐藏第一个div,如果访问者不是来自美国,我想隐藏第二个div。两个div都有相同的类。jquery根据geoIP隐藏第一个或第二个子元素
<div class="myclass">from US</div>
<div class="myclass">not from US</div>
我发现与freegeoip.net/json一些容易实现,但我不能使其适应我的特定需求。
$.get("http://freegeoip.net/json/", function (response) {
$("#ip").html("IP: " + response.ip);
document.getElementsByClassName(response.country_code)[0].style.display = "none";
}, "jsonp");
您真正需要在这一点上做的是,从AJAX请求和读取响应。由于您使用jQuery的,这是比较容易的:
$.ajax('https://freegeoip.net/json/')
.done(function (response) {
var isUS = response.country_code === 'US';
// Your code to hide/show here.
});
这里是一个工作示例:https://jsfiddle.net/TheQueue841/ap3tfyf9/4/
我做了小改动原来的代码;这些元素默认隐藏以避免不需要的内容。
请注意:无论出于何种原因,Firefox都会拒绝ajax调用,但它在Chrome中正常工作。由于Firefox有额外的(偶尔不必要的)安全验证,这可能是由于目标服务器上的某些原因造成的。我找不到可以工作的IP地理位置api,但是其他任何api都能以相同的方式工作。请先查看回复,看看国家/国家/地区代码的存储方式。
编辑:已更新解决方案,以按位置而不是按类别定位。
谢谢!我的解决方案有一个问题,div由复杂的php生成,我不想修改,它们也有相同的我不能将类添加到div,这就是为什么我要求第一个和第二个孩子的解决方案 –
就像我说的,你可以使用Sergej的答案,我用一个解决方案更新了我的答案这个方法来选择适当的元素,我默认情况下隐藏了它,但是如果你不能这样做,只需在eq选择器中交换数字并将'.show()'改为'.hide()' –
谢谢,您的解决方案非常完美! –
(function($) {
$(document).ready(function() {
var isFromUS = true; // Get the flag from your geoIP service
$('.myclass').eq(isFromUS ? 0 : 1).hide();
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">from US</div>
<div class="myclass">not from US</div>
如何你会从你的代码中获得位置? –
你看过评论吗?代码只是演示如何隐藏单独的div元素,基于一个标志 - 是来自美国的用户还是不是。但不是如何获得用户位置。该标志可以使用geoIP服务或HTML5 API获得(如果最终用户允许) – Sergej
谢谢Sergej,这是我一直在寻找的,你是否也可以添加代码来检索geoIP,就像'“$ .get(” http://freegeoip.net/json/“,function(response)”' –
你到目前为止试过的东西?添加更多的示例代码 –
我试图适应这个例子,但我失败了:https://*.com/questions/30173809/how-to-show-or-hide-element-based-on-geo-ip –