javascript - 如何将单选按钮值存储为变量

我试图用html和javascript创建一个多语言站点。
为了选择语言，我创建了三个单选框（值：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);
});

每次选择语言时，alert（lang）和console.log都会提供正确的语言。

但是：其他词不变。如果我用f替换“ lang”，它们会执行'de'（请参阅最后一个代码行）。

最佳答案

名为lang的变量是一个字符串，因为您将其设置为单选输入的值，因此lang.latitude，lang.longitude，lang.accuracy，lang.words和lang.map都是未定义的。

我假设您说de.test有效，所以您拥有诸如de set之类的全局变量。

将所有这些语言放在一个对象中，然后可以通过键或单选输入的值进行引用，这可能是最简单的。我还添加了一个变量，该变量允许您选择默认语言以及将执行实际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);
    }
}

由于您没有发布三个单选按钮的HTML，因此我将为它们提供名称属性，而不是ID的“ lang-settings”值，因为具有重复的ID是无效的HTML。以下是这些单选按钮的最小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