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

Question

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

<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

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

Answer 2

此时您真正需要做的就是拨打 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 都会以相同的方式工作。只需先检查响应，看看 country/country 代码是如何存储的。

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

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

Jquery hide first, or second child element based on geoIP

jquery

geoip