Question

对象是

var dict = {};
  function loadDict() {
  var lang = (getCookieVal("lang") || "en");
  $.ajax({
    async: false,
    type: "GET",
    url: "/lang/"+lang + ".json",
    success: function (msg) {
      dict = msg;
      sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
    }
  });

}

console.log (dict);会给您

tabLanding:{message: "Landing"}
tabSetup:{message: "Setup"}
__proto__:Object

在我的html上：

<li class="tab_setup"><a href="#" i18n="tabSetup"></a></li>

我真的不知道如何使用javascript根据json文件tabLanding中的键使html显示着陆

这是我的完整代码javasScript

  var dict = {};
var systemLang = navigator.language.toLowerCase().slice(0,2);
$(function () {
  registerWords();
  switch(getCookieVal("lang")) {
    case "en" :
      setLanguage("en");
      break
    case "zh" :
      setLanguage("zh");
      break
    default:
      setLanguage(systemLang);
  }
  console.log (dict);
  console.log (dict.tabLanding.message);

// 切换语言事件
  $("#enBtn").bind("click", function () {
    setLanguage("en");
  });

  $("#zhBtn").bind("click", function () {
    setLanguage("zh");
  });

  // $("#applyBtn").bind("click", function () {
  //   alert(__tr("a translation test!"));
  // });
});

function setLanguage(lang) {
  setCookie("lang=" + lang + "; path=/;");
  translate(lang);
}

function getCookieVal(name) {
  var items = document.cookie.split(";");
  for (var i in items) {
    var cookie = $.trim(items[i]);
    var eqIdx = cookie.indexOf("=");
    var key = cookie.substring(0, eqIdx);
    if (name == $.trim(key)) {
      return $.trim(cookie.substring(eqIdx + 1));
    }
  }
  return null;
}

function setCookie(cookie) {
  var Days = 30; //此 cookie 将被保存 30 天
  var exp = new Date(); //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie = cookie+ ";expires=" + exp.toGMTString();
}

function translate(lang) {
  if(sessionStorage.getItem(lang + "Data") != null){
    dict = JSON.parse(sessionStorage.getItem(lang + "Data"));
  }else{
    loadDict();
  }

  $("[i18n]").each(function () {
    switch (this.tagName.toLowerCase()) {
      case "input":
        $(this).val(__tr($(this).attr("i18n")));
        break;
      default:
        $(this).text(__tr($(this).attr("i18n")));
    }
  });
}

function __tr(src) {
  return (dict[src] || src);
}

function loadDict() {
  var lang = (getCookieVal("lang") || "en");
  $.ajax({
    async: false,
    type: "GET",
    url: "/lang/"+lang + ".json",
    success: function (msg) {
      dict = msg;
      sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
    }
  });

}
// 遍历所有lang属性的标签赋值
function registerWords() {

    $('[i18n]:not(.i18n-replaced').each(function() {
        var element = $(this);

        element.html(translate(element.attr('i18n')));

        element.addClass('i18n-replaced');

  });
}

现在显示的是【对象对象】而不是着陆............

Answer 1

在jQuery中要添加“着陆”的元素上使用.html()。这样会将任何内容放在要定位的元素的标记之间的括号内。

我猜你想在锚标记中添加“着陆”：

<li class="tab_setup"><a href="#" i18n="tabSetup"></a></li>

您还可以使用dict.tabLanding.message从词典中访问“着陆”。

因此，如果您希望这样做，可以执行以下操作：

$('.tab_setup').find('a').html(dict.tabLanding.message)

因此，您可以像这样使用它：

var dict = {};
  function loadDict() {
  var lang = (getCookieVal("lang") || "en");
  $.ajax({
    async: false,
    type: "GET",
    url: "/lang/"+lang + ".json",
    success: function (msg) {
      dict = msg;
      sessionStorage.setItem(lang + 'Data', JSON.stringify(dict));
      $('.tab_setup').find('a').html(dict.tabLanding.message); // Add "landing" to anchor tag inside the element with the class tab_setup
    }
  });

}

Answer 2

您可以使用querySelector()和innerHTML尝试这种方式。另请在https://dev.to/flexdinesh/accessing-nested-objects-in-javascript--9m4

中查看如何使用javascript访问嵌套对象

var dict = {tabLanding:{message: "Landing"}}
var anchor = document.querySelector('li a');
anchor.innerHTML = dict.tabLanding.message;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<li class="tab_setup"><a href="#" i18n="tabSetup"></a></li>
</body>
</html>

如何根据messages.json

2 个答案: