jQuery 浏览器语言检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18317335/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery browser language detection
提问by Xareyo
Scenario
设想
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.
英语将是默认语言，因此如果数组中的任何单元格都不匹配，则会显示该语言。
I'm using the navigator.languageand navigator.userLanguage(IE) value to detect which language the browser is currently using.
我正在使用navigator.languageand navigator.userLanguage(IE) 值来检测浏览器当前使用的语言。
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.
我目前有一些正在进行的代码，但我不确定合并所有潜在可能性然后使用数组选择它们的最佳方法。
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?
也有可能不止一种语言与一个国家相关联。例如，以英语为例，有 en-us、en-uk 等。我将如何将其联系起来？
Code
代码
HTML
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)
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');
}
Example
例子
Thank you for your time.
感谢您的时间。
UPDATE
更新
To provide the full solution that worked for me and to ultimately help future users, I used the same layout of HTMLfrom above and combined it with putvande's jQuery solution.
为了提供对我有用的完整解决方案并最终帮助未来的用户，我使用了与HTML上面相同的布局并将其与putvande 的 jQuery 解决方案相结合。
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:
注意：此效果会根据为浏览器选择的语言触发更改。作为如何在 Google Chrome 中执行此操作的示例：
- Go to the settings ->
- Scroll down to and click "Show advanced settings..." ->
- Click "Language and input settings..." ->
- Then select you're desired language, click done and restart your browser.
- 转到设置->
- 向下滚动并单击“显示高级设置...”->
- 单击“语言和输入设置...”->
- 然后选择您想要的语言，单击完成并重新启动浏览器。
I hope this helps.
我希望这有帮助。
回答by putvande
You can split the navigator.languageinto two and only use the first parameter (the language) and use that to select the lithat has that class:
您可以将其拆分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');
}
Or are you also going to be changing the liaccording to the country (for example US and UK english)?
或者您是否也将li根据国家/地区（例如美国和英国英语）进行更改？
