JQueryはgeoIPに基づいて第1子要素または第2子要素を非表示にします

Question

訪問者が米国出身の場合は最初のdivを非表示にしたい、訪問者が米国出身でない場合は2番目の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");

Answer 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は同じように動作します。国/国コードがどのように格納されているかを確認するには、最初に応答をチェックしてください。

EDIT：ソリューションをクラスではなく位置でターゲットに合わせて更新しました。

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