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

【问题标题】：How to store radio button value as variable如何将单选按钮值存储为变量
【发布时间】：2017-04-17 17:19:55
【问题描述】：

我尝试使用 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'（见最后一行代码）。

【问题讨论】：

lang 是一个字符串，所以 lang.latitude 是未定义的。如果你在 window 中创建了一个名为 de 的全局对象并带有翻译，你需要做的是 window[lang].latitude，如果 lang === 'de' 则计算为 de.latitude
基本上复制了：stackoverflow.com/questions/4244896/…
Dynamically access object property using variable的可能重复
任何要显示的 HTML？你的对象看起来怎么样？
@RokoC.Buljan 应该是单选框。感谢提及

标签： javascript jquery html object

【解决方案1】：

您的名为 lang 的变量是一个字符串，因为您将其设置为无线电输入的值，因此 lang.latitude、lang.longitude、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，其值为“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”和“法国”。我还在文档中添加了函数调用，准备在页面加载时运行您的默认语言选择。

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

【讨论】：

这是 imo 的最佳答案。
我真的很喜欢你的解决方案。不幸的是，它给了我这个错误消息：无法读取未定义的属性“纬度”
您是否创建了对象的“翻译”变量？在控制台中，您应该能够键入“translate.de.latitude”，它应该会为您提供所做的任何事情的价值。我不懂德语或法语，所以我只是将它们保留为空字符串，但我想你的代码中已经有这些值可以复制/粘贴到其中。
如果可行，则在捕获侦听器内的“lang”变量的值后添加“调试器”，并确保我们得到正确的字符串。
它们中的大多数要么工作，你不知道为什么，要么他们不工作，不知道为什么:) 这可能只适用于初学者。

【解决方案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>

【讨论】：