我一直在构建我的第一个 html 作品集,由于我是一名翻译人员,我认为为其提供多语言支持会很有趣。我在网络(更具体地说是 Stack Overflow)中搜索了选项,最终找到了这个解决方案:
lang.js:
var langs = ['en', 'pt'];
var langCode = '';
var langJS = null;
var translate = function (jsdata)
{
$("[tkey]").each (function (index)
{
var strTr = jsdata [$(this).attr ('tkey')];
$(this).html (strTr);
console.log('strTr is: '+strTr)
});
}
langCode = navigator.language.substr (0, 2);
console.log('langCode is: '+langCode)
if (langCode in langs)
$.getJSON('lang/'+langCode+'.json', translate);
else
$.getJSON('lang/pt.json', translate);
html 片段:
<div class="odd" id="SkillsLanguages">
<h1 tkey="skills-lang"></h1>
</div>
json 文件位于/lang/
json 片段:
{
"skills-lang" : "Habilidades e Idiomas",
"proj2" : "GameLibrary App",
"copyright" : "Copyright by Francisco Llamosas 2018"
}
在我看来它应该可以工作,但我刚刚开始使用 webdev,我不确定为什么它不起作用。
输出只是空文本,根本没有字符串。 CSS 内容渲染得很好,div、背景颜色、引导列等,但网页上没有文本
请注意,我不是正在寻找替代解决方案来为我的 html 网站提供多语言支持(找到了几个不同的实现,我将在适当的时候完成它们),但是尝试理解为什么这段特定的代码不起作用,以及应该修复什么才能使它起作用(如果可能的话)。
我已尝试为该问题提供足够的信息和上下文,但如果您需要其他任何内容,我很乐意提供更多代码片段和/或信息。
感谢您的帮助。
最佳答案
删除 JSON 文件中最后一个对象/数组属性后的所有尾随逗号后,使用 in
会出现问题。运算符 if( langCode in langs)
。语言代码是 langs
中的值数组,而不是它的命名属性。相反,检查是否 langCode
在数组中:
// ...
if ($.inArray( langCode, langs) >= 0) {
$.getJSON('lang/'+langCode+'.json', translate);
}
else {
$.getJSON('lang/pt.json', translate);
}
关于javascript - 为什么这个带有 jQuery tkey 属性的 JS 代码为不同语言提供不同的 html 字符串不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49867833/