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

时间:2017-04-17 17:19:56

标签: javascript jquery html object

我尝试用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.e替换'lang',他们会这样做。 'de'(见最后一行代码)。

2 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

名为 lang 的变量是一个字符串,因为您将其设置为无线电输入的值,因此 lang.latitude lang。经度 lang.accuracy lang.words lang.map 都未定义。

我假设您已设置 de 等全局变量,因为您说 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);
    }
}

由于您没有发布三个单选按钮的HTML,我将改为为其提供名称属性,而不是ID为&#34; lang-settings&#的id&#39; s 34;因为有重复的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" />

然后,对于你的听众,我已将其切换为聆听&#34;点击&#34;而不是改变,因为单选按钮的值实际上并没有改变,他们将继续作为&#34; en&#34;,&#34; de&#34;和&#34; fr& #34 ;.我还在文档中添加了函数调用,以便在页面加载时运行默认语言选择。

$('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