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

Question

如果访问者来自美国，我想隐藏第一个 div，如果访问者不是来自美国，我想隐藏第二个 div。两个 div 具有相同的类。

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

Answer 1

此时您真正需要做的就是进行 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 geolocation api，但其他任何 api 都会以相同的方式工作。只需先查看响应以了解国家/地区代码的存储方式。

编辑：更新了按位置而不是按类别定位的解决方案。

Answer 2

(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>