基于geo IP的HTML元素控制

Question

我们有一个移动网页这里，将在不同的国家和国内提供，我们需要有能力根据访问者的IP改变以下内容：

• div#container将具有不同的背景图像
• div#buttons隐藏并显示div#按钮-2

使用名为JavaScript的GeoIP，到目前为止，我们能够识别访问者所在的国家，并以两个字符的形式获取函数名，以便用于控制其他JavaScript函数。例如，我来自英国，所以当我访问该页面时，JavaScript会生成以下代码：

function geoip_country_code() { return 'GB'; }

在HTML中，当前有一个脚本，它说：

    if (geoip_country_code() == 'GB') 
    {
      alert("Hello, you are in Great Britain");
    }

我们希望开发它，以便能够操作指定元素的CSS，但我们对JavaScript并不熟悉，因此我们需要帮助。

这是嵌入到页面中的JavaScript：

<script src="http://j.maxmind.com/app/country.js" charset="ISO-8859-1"></script>

下面是我们想要控制的HTML元素：

<div id="container">
            <div id="buttons">
                <a href="#" target="blank">
                    <div class="button youtube"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button facebook"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button web"></div>
                </a>
                <a href="#" target="blank">
                    <div class="button appstore"></div>
                </a>
            </div>
        </div>

Answer 1

var map = {
    'GB': {
        'background': 'img1.jpg',
        'buttons': 'show',
        'buttons2': 'hide'
    }
};

var country = geoip_country_code();
$('#container').css('background', map[country].background);
$('#buttons')[map[country].buttons]();
$('#buttons2')[map[country].buttons2]();

这是一个使用jQuery的示例。我希望你得到使用“映射对象”的想法(只有英国在那里，但添加国家，你想要)，然后你可以做你的行动基于这一点。

Answer 2

根据返回的国家代码，您应该更改样式表(Css)。

就像返回的GB一样，然后加载css，其中div#container有不同的背景图像，div#buttons被隐藏并显示div#按钮-2

否则反之亦然。

或者您只需使用javascript就可以做到这一点。

创建一个函数:设置容器的背景图像，隐藏div#button，显示div#按钮-2

另一个反之亦然的函数:设置容器的另一个背景图像，显示div#button，隐藏div#按钮-2。

现在您可以调用相应的函数来显示如下:如果返回'US‘调用func1，如果返回'UK’调用func2