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

Posted 2023-02-23

【中文标题】jquery根据geoIP隐藏第一个或第二个子元素

【英文标题】：Jquery hide first, or second child element based on geoIP

【发布时间】：2017-08-04 12:47:43

【问题描述】：

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

【问题讨论】：

到目前为止您尝试过什么？添加更多示例代码

我尝试改编这个例子，但失败了：***.com/questions/30173809/…

【参考方案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 都会以相同的方式工作。只需先查看响应以了解国家/地区代码的存储方式。

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

【讨论】：

谢谢！我的解决方案有一个问题，div 是由我不想修改的复杂 php 生成的，并且它们具有相同的类名。我无法将类添加到 div，这就是为什么我要求使用第一个和第二个孩子的解决方案。

就像我说的，您可以使用 Sergej 的答案。我已经使用该方法更新了我的答案，以选择适当的元素。我默认隐藏它，但如果你也不能这样做，只需交换 eq 选择器中的数字并将.show() 更改为.hide()。

谢谢，您的解决方案非常完美！

【参考方案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>

【讨论】：

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

谢谢 Sergej，这就是我要找的东西，你能不能也添加代码来检索 geoIP，比如'"$.get("freegeoip.net/json", function (response)"'