Question

我一直在构建我的第一个html投资组合，而且由于我是一名交易翻译员，我认为提供多语言支持会很有趣。我已经搜索了网页（以及更具体的Stack Oververflow）以获取选项，并最终达到了这个解决方案：

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，背景颜色，bootstrap列等，但网页上没有文字

请注意，我不正在寻找替代解决方案来为我的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);
}

Answer 2

是的，我刚试过一个改动版： https://jsfiddle.net/xpvt214o/138022/

问题出在该行：

if (langcode in langs)

我删除了该行，只是调用了translate（pt）并且它有效。查看js小提琴，您将看到console.log输出。

Answer 3

所以，事实证明我使用https://code.jquery.com/jquery-3.1.1.slim.min.js在我的html文件上调用了jQuery的瘦身版本，并且它不支持.getJSON()方法。在我的HTML上将其更改为https://code.jquery.com/jquery-3.1.1.min.js解决了这个问题。感谢所有响应者，我的脚本上发现了其他错误。

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

3 个答案: