带有JQuery和嵌套JSON的多语言HTML

时间:2018-12-18 21:34:22

标签: jquery html json multilingual

我使用以下JQuery代码编写了一个简单的多语言网站:

(function() {
  var language, translate;

  translate = function(jsdata) {
    $('[tkey]').each(function(index) {
      var strTr;
      strTr = jsdata[$(this).attr('tkey')];
      $(this).html(strTr);
    });
  };

  language = $.cookie('language');

  if (language === 'en') {
    $.getJSON('en.json', translate);
  } else {
    $.getJSON('hu.json', translate);
    $('#eng').show(0);
    $('#hun').hide(0);
  }

}).call(this);

如果将数据存储在两个简单的JSON文件中,例如

en.json

{
  "title" : "test1",
  "body" : "Hello Word!"
}

hu.json

{
  "title" : "teszt1",
  "body" : "Szia Világ!"
}

我可以通过以下方式调用HTML中的内容

<p tkey='title'></p>
<p tkey='body'></p>

实际上,我想使用从诸如此类的md文件生成的嵌套JSON文件

en.json

{
  "1.md": {
    "title": "test 1", "body": "Hello Word!"
  },
  "2.md": {
    "title": "test 2", "body": "Hello Word again!"
  }
}

hu.json

{
  "1.md": {
    "title": "teszt 1", "body": "Szia Világ!"
  },
  "2.md": {
    "title": "teszt 2", "body": "Szia Világ megint!"
  }
}

您能帮我吗,我怎么用HTML称呼它们?

<p tkey='1.md.title'></p>
<p tkey='1.md.body'></p>

不起作用。

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

如果您的第一个示例可行,那么最快的第二个示例必须像这样:

<p tkey1="1.md" tkey2="title"></p>
<p tkey1="1.md" tkey2="body"></p>

和您的translate函数

  translate = function(jsdata) {
    $('[tkey1]').each(function(index) {
      var strTr;
      strTr = jsdata[$(this).attr('tkey1')][$(this).attr('tkey2')];
      $(this).html(strTr);
    });
  };