Question

我有这个脚本给我Geo位置，比如“CA”或“US”。我想在我的html基础上显示一个特定的用户位置。有什么建议吗？

HTML：

<div id="ip">Loading...</div>
<div id="country_code"></div>
<div id="country_code">Hello Canada</div>
<div id="country_code">Hello USA</div>


<script>
    $.get("https://freegeoip.net/json/", function (response) {
        $("#ip").html("IP: " + response.ip);
        $("#country_code").html(response.country_code);
    }, "jsonp");
    document.getElementById("US").style.display = "block";
    document.getElementById("CA").style.display = "block";
</script>

CSS：

#US { text-align: left; color: blue; display:none;} 
#CA { text-align: left; color: blue; display:none;}

JSfiddle

Answer 1

如评论所述，简单的if条件将起作用。

＆＃13;

$.get("http://freegeoip.app/json/", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#country_code").html(response.country_code);
    if(response.country_code=='CA'||response.country_code=='US'){
    	document.getElementById(response.country_code).style.display = "block";
	}
}, "jsonp");

＆＃13;

#US { text-align: left; color: blue; display:none;} 
#CA { text-align: left; color: blue; display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ip">Loading...</div>
<div id="country_code"></div>
<div id="CA">THE CA</div>
<div id="US">THE US</div>

＆＃13;

更新时间：15/12/2018

http://freegeoip.net 已关闭。我已使用 https://freegeoip.app

更新了网址

如果您有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

您可以使用国家/地区代码修饰元素，然后使用getElementsByClassName切换。 See fiddle

更新了您的示例：

HTML

<div class="hide CA">Hello Canada</div>
<div class="hide US">Hello USA</div>

JS

$.get("http://freegeoip.net/json/", function (response) {
    $("#ip").html("IP: " + response.ip);
    document.getElementsByClassName(response.country_code)[0].style.display = "block";
}, "jsonp");

CSS

.hide {display: none;}

Answer 3

您成功获取了IP和国家/地区代码。现在您只需要添加一个if语句来显示各个国家/地区的div。只需添加

    var country = response.country_code;
    if(country == 'US' || country == 'CA') document.getElementById(country).style.display = "block";

在获取请求中。您还需要拥有唯一的ID，以便更改您的＆＃34; Hello ____＆＃34;代码

<div id="CA">Hello Canada</div>
<div id="US">Hello USA</div>

<强> jsFiddle

如何根据Geo ip显示或隐藏元素

3 个答案: