ラジオボタンの値を変数として保存する方法

Question

htmlとjavascriptを使用して多言語サイトを作成しようとしました。 言語を選択するために、3つのラジオボックス（値：en、de、fr）を作成しました。 表示されるべき単語は、javascriptオブジェクトに格納されます。ここで

は、コードは次のとおりです。

$('#lang-setting').on('change', function() { 
var lang = $('input:checked', '#lang-setting').val(); 
console.log(lang); 
alert(lang); 
$('#latitude-n').html(lang.latitude); 
$('#longitude-n').html(lang.longitude); 
$('#accuracy-n').html(lang.accuracy); 
$('#words-n').html(lang.words); 
$('#map-n').html(lang.map); 
$('#test').html(de.test); 
}); 

警告（LANG）とにconsole.logは右の言語私は、言語を選択し、すべての時間を与えます。

しかし、他の言葉は変更されません。私が 'lang'をf.eに置き換えると、彼らはそれを行います。 'de'（最後のコード行を参照）。

Answer 1

あなたはラジオ入力の値に設定しているので、LANGという名前の変数が文字列なので、lang.latitude、lang.longitude、lang.accuracy,lang.wordsおよびlang.mapはすべて定義されていません。

あなたはde.test作品を言ったので、私はあなたがそのような・デ・セットなどのグローバル変数を持っていると仮定しています。

これらの言語はすべて、キーまたは無線入力の値で参照できる単一のオブジェクトに入れるのが最も簡単です。また、デフォルトの言語と実際のhtml変更を実行する関数を選択できる変数も追加しました。

var translate = { 
    default: 'en', 
    en: { 
     latitude: 'latitude', 
     longitude: 'longitude', 
     accuracy: 'accuracy', 
     words: 'words', 
     map: 'map', 
    }, 
    de: { 
     latitude: '', 
     longitude: '', 
     accuracy: '', 
     words: '', 
     map: '', 
    }, 
    fr: { 
     latitude: '', 
     longitude: '', 
     accuracy: '', 
     words: '', 
     map: '', 
    }, 
    changeText: function(lang) { 
     $('#latitude-n').html(translate[lang].latitude); 
     $('#longitude-n').html(translate[lang].longitude); 
     $('#accuracy-n').html(translate[lang].accuracy); 
     $('#words-n').html(translate[lang].words); 
     $('#map-n').html(translate[lang].map); 
    } 
} 

あなたは3つのラジオボタンのHTMLを投稿していなかったので、私は重複したIDを持つことはHTML無効であるため、代わりに名前が値「LANG-の設定」でのIDの代わりに属性をそれらを与えるつもりです。以下は、これらのラジオボタンの最小限のHTMLです。ラジオボタンの値が実際に変更されていないため、

<input name="lang-setting" value="en" type="radio" /> 
<input name="lang-setting" value="de" type="radio" /> 
<input name="lang-setting" value="fr" type="radio" /> 

は、その後、あなたのリスナーのために、私は、代わりに変更する「クリック」をリッスンするために、それを切り替えた、彼らは "、「EN」として滞在しています「de」、「fr」などがある。また、ドキュメントロード時にデフォルトの言語選択を実行する準備ができた関数呼び出しをドキュメントに追加しました。

$('input[name="lang-setting"]').on('click', function(e){ 
    var lang = $(this).val(); 
    translate.changeText(lang); 
}); 
$(document).ready(function(){ 
    translate.changeText(translate.default); 
}); 

はここworking demo of it on JSFiddle

Answer 2

これは機能しません。大括弧表記が必要です。

var words = { 
 
    de: { 
 
    lat: "Breitengrad", 
 
    lon: "Längengrad" 
 
    }, 
 
    en: { 
 
    lat: "Latitude", 
 
    lon: "Longitude" 
 
    }, 
 
    fr: {} 
 
}; 
 

 
function changeLanguage() { 
 
    var lang = $('#lang-setting input:checked').val(); 
 
    $('#latitude-n').html(words[lang].lat); 
 
} 
 

 
$('#lang-setting input').click(changeLanguage); 
 
changeLanguage();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="lang-setting"> 
 
    <input type="radio" value="en" name="lang" checked>En</option> 
 
    <input type="radio" value="de" name="lang">De</option> 
 
    <input type="radio" value="fr" name="lang">Fr</option> 
 
</div> 
 
<p> 
 
    <span id="latitude-n"></span>: <input /> 
 
</p>