jquery根据geoIP隐藏第一个或第二个子元素

-1

如果访问者来自美国，我想隐藏第一个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");

来源

2017-08-04 Sera Zoli

你到目前为止试过的东西？添加更多的示例代码 –

我试图适应这个例子，但我失败了：https：//stackoverflow.com/questions/30173809/how-to-show-or-hide-element-based-on-geo-ip –

您真正需要在这一点上做的是，从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都能以相同的方式工作。请先查看回复，看看国家/国家/地区代码的存储方式。

编辑：已更新解决方案，以按位置而不是按类别定位。

来源

2017-08-04 14:14:55

谢谢！我的解决方案有一个问题，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>

来源

2017-08-04 12:51:00 Sergej

如何你会从你的代码中获得位置？ –

你看过评论吗？代码只是演示如何隐藏单独的div元素，基于一个标志 - 是来自美国的用户还是不是。但不是如何获得用户位置。该标志可以使用geoIP服务或HTML5 API获得（如果最终用户允许） – Sergej

谢谢Sergej，这是我一直在寻找的，你是否也可以添加代码来检索geoIP，就像'“$ .get（” http://freegeoip.net/json/“，function（response）”' –

jquery根据geoIP隐藏第一个或第二个子元素

回答

相关问题