jQuery 浏览器语言检测

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

感谢您的宝贵时间。

<小时/>

更新

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

Here is a working example .

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

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

我希望这会有所帮助。

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？