jQuery浏览器语言检测 [英] jQuery browser language detection

问题描述

场景

我需要创建一个页面(仅限客户端)，该页面检测浏览器使用的是哪种语言，并显示与该语言有关的适当的class元素，并隐藏其他语言.

I'm in need to create a page (client-side only) that detects what language the browser is using and displays the appropriate class element relating to that language, and hides the others.

英语是默认语言，因此，如果数组中的所有单元格都不匹配，则会显示该语言.

English would be the default language, so if none of the cells in the array are matched, this would be displayed.

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

I'm using the navigator.language and navigator.userLanguage (IE) value to detect which language the browser is currently using.

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

I currently have some code that's in progress, but i'm not sure of the best way to incorporate all the potential possibilities and then select them using an array.

与一个国家或地区捆绑使用多种语言的可能性也很大.以英语为例，例如en-us，en-uk等.我该如何配合?

There's also the possibility of more than one language being tied with a country. Say for instance English as an example has en-us, en-uk etc.. How would I tie this in?

代码

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');
}

示例

小提琴

谢谢您的时间.

更新

为了提供对我有用的完整解决方案并最终为将来的用户提供帮助，我从上方使用了HTML的相同布局，并将其与

To provide the full solution that worked for me and to ultimately help future users, I used the same layout of HTML from above and combined it with putvande's jQuery solution.

这是一个可行的示例.

注意:此效果将触发更改，具体取决于为浏览器选择的语言.有关如何在Google Chrome浏览器中执行此操作的示例:

NOTE: This effect triggers the changes depending on the language selected for the browser. As an example on how to do this in Google Chrome:

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

我希望这会有所帮助.

推荐答案

您可以将navigator.language拆分为两个，并且仅使用第一个参数(语言)，然后使用该参数选择具有该类的li:

You can split the navigator.language into two and only use the first parameter (the language) and use that to select the li that has that class:

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?

Or are you also going to be changing the li according to the country (for example US and UK english)?

这篇关于jQuery浏览器语言检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！