javascript - 为什么这个带有 jQ​​uery tkey 属性的 JS 代码为不同语言提供不同的 html 字符串不起作用？

Question

我一直在构建我的第一个 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 网站提供多语言支持(找到了几个不同的实现，我将在适当的时候完成它们)，但是尝试理解为什么这段特定的代码不起作用，以及应该修复什么才能使它起作用(如果可能的话)。

我已尝试为该问题提供足够的信息和上下文，但如果您需要其他任何内容，我很乐意提供更多代码片段和/或信息。

感谢您的帮助。

Answer 1

删除 JSON 文件中最后一个对象/数组属性后的所有尾随逗号后，使用 in 会出现问题。运算符 if( langCode in langs) 。语言代码是 langs 中的值数组，而不是它的命名属性。相反，检查是否 langCode在数组中:

//   ...

if ($.inArray( langCode, langs) >= 0) {
    $.getJSON('lang/'+langCode+'.json', translate);

}
else {
    $.getJSON('lang/pt.json', translate);
}