15

シナリオ

ブラウザーが使用している言語を検出し、その言語に関連する適切なクラス要素を表示し、他の要素を非表示にするページ (クライアント側のみ) を作成する必要があります。

英語がデフォルトの言語になるため、配列内のどのセルも一致しない場合、これが表示されます。

navigator.languageand navigator.userLanguage(IE) 値を使用して、ブラウザーが現在使用している言語を検出しています。

現在進行中のコードがいくつかありますが、すべての潜在的な可能性を組み込み、配列を使用してそれらを選択する最善の方法がわかりません。

1 つの国に複数の言語が関連付けられている可能性もあります。たとえば、英語には 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 (仕掛品)

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

例

フィドル

お時間をいただきありがとうございます。

アップデート

私にとって機能する完全なソリューションを提供し、最終的に将来のユーザーを支援するために、上記と同じレイアウトを使用し、それをputvande の jQuery ソリューションHTMLと組み合わせました。

これが実際の例です。

注: この効果は、ブラウザーで選択された言語に応じて変更をトリガーします。Google Chrome でこれを行う方法の例として:

  • 設定に移動 - >
  • 下にスクロールして [詳細設定を表示...] をクリックします ->
  • 「言語と入力の設定...」をクリック ->
  • 次に、目的の言語を選択し、[完了] をクリックしてブラウザーを再起動します。

これが役立つことを願っています。

4

1 に答える 1

28

を 2 つに分割し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ですか (たとえば、米国英語と英国英語)?

于 2013-08-19T15:26:44.547 に答える