Question

我们有一个移动网页here，该网页将在不同的国家和地区提供，我们需要根据访问者的IP更改以下内容：

div＃container具有不同的背景图像
要隐藏的div＃按钮和要显示的div＃buttons-2

使用名为GeoIP的JavaScript，我们到目前为止能够识别访问者的国家/地区，并以两个字符ISO 3166-1的形式获取函数名称，以用于控制其他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＃按钮被隐藏，div＃buttons-2显示

反之亦然。

或者您只需使用javascript

即可

制作一个功能：设置容器的背景图像，隐藏div＃按钮，显示div＃buttons-2

另一个功能反之亦然：设置容器的另一个背景图像， show div＃button，隐藏div＃buttons-2

现在你可以调用适当的函数来显示如下：如果返回'US'调用func1，如果返回'UK'，则调用func2

控制依赖于地理IP的HTML元素

2 个答案: