jQuery ngôn ngữ trình duyệt phát hiện

Question

Kịch bản

Tôi có nhu cầu để tạo ra một trang (client-side only) phát hiện những gì ngôn ngữ trình duyệt đang sử dụng và hiển thị các yếu tố lớp thích hợp liên quan đến ngôn ngữ đó, và da những người khác.

Tiếng Anh sẽ là ngôn ngữ mặc định, vì vậy nếu không có ô nào trong mảng được khớp, thì điều này sẽ được hiển thị.

Tôi đang sử dụng giá trị navigator.language và navigator.userLanguage (IE) để phát hiện ngôn ngữ mà trình duyệt hiện đang sử dụng.

Tôi hiện đang có một số mã đang được tiến hành, nhưng tôi không chắc chắn cách tốt nhất để kết hợp tất cả các khả năng tiềm năng và sau đó chọn chúng bằng cách sử dụng một mảng.

Ngoài ra còn có khả năng có nhiều ngôn ngữ bị ràng buộc với một quốc gia. Nói ví dụ tiếng Anh như là một ví dụ có en-chúng tôi, en-uk vv .. Làm thế nào tôi sẽ tie này?

Mã

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

Ví dụ

Fiddle

Cảm ơn bạn đã dành thời gian.

---

CẬP NHẬT

Để cung cấp các giải pháp đầy đủ mà làm việc cho tôi và cuối cùng là giúp người dùng trong tương lai, tôi đã sử dụng cách bố trí tương tự của HTML từ trên cao và kết hợp nó với putvande's jQuery solution.

Here is a working example.

LƯU Ý: Hiệu ứng này kích hoạt các thay đổi tùy thuộc vào ngôn ngữ được chọn cho trình duyệt. Như một ví dụ về cách để làm điều này trong Google Chrome:

• Vào cài đặt ->
• Cuộn xuống và nhấp vào "Hiển thị cài đặt nâng cao ..." ->
• Bấm "Ngôn ngữ và đầu vào cài đặt ... "->
• Sau đó chọn ngôn ngữ mong muốn, hãy nhấp vào thực hiện và khởi động lại trình duyệt của bạn.

Tôi hy vọng điều này sẽ hữu ích.

Answer 1

Bạn có thể chia navigator.language thành hai và chỉ sử dụng các tham số đầu tiên (ngôn ngữ) và sử dụng để chọn li có lớp rằng:

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

Hoặc là bạn cũng sẽ được thay đổi li theo quốc gia (ví dụ như tiếng Anh Mỹ và Anh)?