jQuery język przeglądarki wykrywanie

Question

Scenariusz

jestem w potrzebie, aby utworzyć stronę (tylko po stronie klienta), który wykrywa w jakim języku przeglądarka korzysta i wyświetla odpowiednią klasę elementu odnoszącego się do tego języka i skór inni.

Angielski będzie językiem domyślnym, więc jeśli żadna z komórek w tablicy nie zostanie dopasowana, zostanie wyświetlony.

Używam wartości navigator.language i navigator.userLanguage (IE) do wykrywania języka, którego aktualnie używa przeglądarka.

Mam obecnie kod, który jest w toku, ale nie jestem pewien najlepszego sposobu włączenia wszystkich potencjalnych możliwości, a następnie wybierz je za pomocą tablicy.

Istnieje również możliwość powiązania więcej niż jednego języka z krajem. Powiedzmy na przykład, że angielski ma przykład en-us, en-uk itd .. Jak mam to powiązać?

kod

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

Przykład

Fiddle

Dziękuję za poświęcony czas.

---

UPDATE

Aby zapewnić pełne rozwiązanie, które pracowały dla mnie i ostatecznie pomóc przyszłych użytkowników, kiedyś ten sam układ HTML z góry i połączono go z putvande's jQuery solution.

Here is a working example.

UWAGA: Ten efekt wyzwala zmiany w zależności od języka wybranego dla przeglądarki. Jako przykład o tym, jak to zrobić w Google Chrome:

• przejść do ustawień ->
• Przewiń w dół i kliknij "Pokaż ustawienia zaawansowane ..." ->
• kliknąć „Język i wprowadzanie ustawienia ... "->
• Następnie wybierz żądany język, kliknij Zakończ i uruchom ponownie przeglądarkę.

Mam nadzieję, że to pomoże.

Answer 1

można podzielić navigator.language na dwie części i wykorzystywać tylko pierwszy parametr (język) i używać, aby wybrać li że ma tę klasę:

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

może jesteś też będzie zmiana li w zależności od kraju (na przykład angielski w USA i Wielkiej Brytanii)?