gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:54:21 25 4
gpt4 key购买 nike

我尝试用 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 的变量是一个字符串,因为您将其设置为 radio 输入的值,因此 lang.latitude, lang.longitudelang.accuracylang.wordslang.map 均未定义。

我假设您有全局变量,例如 de 设置,因为您说 de.test 有效。

将所有这些语言放入一个对象中可能是最简单的,然后您可以通过键或 radio 输入的值来引用该对象。我还添加了一个变量,允许您选择默认语言和将执行实际 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,因此我将为它们提供名称属性,而不是值为“lang-settings”的 id,因为具有重复的 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

关于javascript - 如何将单选按钮值存储为变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43456166/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com