javascript - How to show or hide element based on Geo ip - Stack Overflow

admin管理员组

文章数量:1297030

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("/", 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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 15, 2018 at 4:30 NewToJS 2,77233 gold badges1616 silver badges2222 bronze badges asked May 11, 2015 at 17:18 GrocGroc 7511 silver badge99 bronze badges 5

• You can use a simple if condition... if(response.country_code=='US'){//Do something here} – NewToJS Commented May 11, 2015 at 17:22
• 1 And IDs should be unique within a page – Francis Nepomuceno Commented May 11, 2015 at 17:23
• @NewToJS Thanks, that sorta worked, It shows up for USA, but not if I change the order. USA: jsfiddle CA: jsfiddle World: jsfiddle Any suggestions? – Groc Commented May 11, 2015 at 17:52
• @Groc I have posted an answer below. You can run the snippet. All should work just fine :) You do need to add the div's as shown in my answer for #CA and #US. – NewToJS Commented May 11, 2015 at 17:55
• @Groc If my post does answer your question, please remember to mark it. This will help others with the same question find the answer. – NewToJS Commented May 11, 2015 at 17:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

As mented, a simple if condition will work.

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

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

<script src="https://ajax.googleapis./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>

UPDATE: 15/12/2018

http://freegeoip Has shutdown. I have updated the url with https://freegeoip.app

---

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

I hope this helps. Happy coding!

You can decorate your elements with the country codes, then use getElementsByClassName to toggle. See fiddle.

Updated your sample:

HTML

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

JS

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

CSS

.hide {display: none;}

You successfully get the IP and country code. Now you just need to add an if statement to display the div's for the various countries. Just add

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

inside your Get Request. You also need to have unique IDs so change your "Hello ____" code to

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

jsFiddle

本文标签： javascriptHow to show or hide element based on Geo ipStack Overflow