Question

方案

我需要创建一个页面（仅限客户端），用于检测浏览器使用的语言，并显示与该语言相关的相应类元素，并隐藏其他语言。

英语将是默认语言，因此如果数组中没有任何单元格匹配，则会显示。

我正在使用navigator.language和navigator.userLanguage（IE）值来检测浏览器当前使用的语言。

我目前有一些正在进行中的代码，但我不确定将所有潜在可能性合并的最佳方法，然后使用数组选择它们。

还有一种语言与一个国家联系在一起的可能性。比如说英语作为一个例子有en-us，en-uk等。我怎么把它绑在一起？

代码

HTML

<ul class="text">
    <li class="en active">English: Some text in english</li>
    <li class="fr">French: Some text in french</li>
    <li class="de">German: Some text in german</li>
    <li class="it">Italian: Some text in italian</li>
    <li class="ja">Japanese: Some text in japanese</li>
    <li class="es">Spanish: Some text in spanish</li>
</ul>

JS（WIP）

var userLang = navigator.language || navigator.userLanguage,
    countries = ['fr', 'de', 'it', 'ja', 'es'],
    languagues = ['fr', 'de', 'it', 'ja', 'es'];

if (userLang === "fr") {
    $('li').removeClass('active');
    $('.fr').addClass('active');
}

示例

Fiddle

感谢您的时间。

更新

为了提供对我有用并最终帮助未来用户的完整解决方案，我使用了上面HTML的相同布局，并将其与putvande's jQuery solution结合使用。

Here is a working example

注意：此效果会根据为浏览器选择的语言触发更改。有关如何在Google Chrome中执行此操作的示例：

转到设置 - ＆gt;
向下滚动并点击“显示高级设置...” - ＆gt;
点击“语言和输入设置...” - ＆gt;
然后选择您想要的语言，点击完成并重新启动浏览器。

我希望这会有所帮助。

Answer 1

您可以将navigator.language拆分为两个并仅使用第一个参数（语言）并使用它来选择具有该类的li：

var userLang = navigator.language || navigator.userLanguage;

// Check if the li for the browsers language is available
// and set active if it is available
if($('.' + userLang.split('-')[0]).length) {
    $('li').removeClass('active');
    $('.' + userLang.split('-')[0]).addClass('active');
}

或者您是否也会根据国家/地区更改li（例如美国和英国的英语）？

jQuery浏览器语言检测

1 个答案: