如何显示或隐藏基于地理IP的元素 [英] How to show or hide element based on Geo ip

问题描述

我有这个脚本给我地理位置，例如CA或US。我想在用户位置的html基础中显示特定的内容。任何建议？

HTML：

 < div id =ip>正在载入...< / div> 
< div id =country_code>< / div> 
< div id =country_code> Hello Canada< / div> 
< div id =country_code> Hello USA< / div> 
 
 
< script> 
 $ .get（http://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;颜色：蓝色; display：none;} 
 #CA {text-align：left;颜色：蓝色; display：none;} 
  

JSfiddle

解决方案

正如评论所说，一个简单的if条件会起作用。

  $。get（http://freegeoip.net/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）;  

  #US {text-align：left;颜色：蓝色; display：none;} #CA {text-align：left;颜色：蓝色; display：none;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =ip>正在加载...< / div> ;< div id =country_code>< / div>< div id =CA> CA< / div>< div id =US>

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

我希望这有助于。快乐的编码！

I have this script to give me the Geo Location, like "CA" or "US". I want to show a specific into in my html base on the user location. Any suggestions?

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("http://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

解决方案

As commented, a simple if condition will work.

$.get("http://freegeoip.net/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");

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

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

If you have any questions, leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

这篇关于如何显示或隐藏基于地理IP的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！