1

console.log (dict) will give you

{"click here:":{"message":"点击这里"},"apply":{"message":"应用"},"a translation test!":{"message":"js翻译示例!"},"tabLanding":"欢迎","tabSetup":{"message":"安装"}}

I want tabSetup appear like 安装 in html here is the html code:

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

what i see is it does not shows correctly just showed as [object Object] it should showed as 安装

here is my java-script. Thanks

 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(JSON.stringify(dict));


    // 切换语言事件
      $("#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');

      });
    }

It works if json file like "tabSetup": "Set up". .It does not works if json file like "tabSetup": { "message": "Set up" }

4
  • the function translate does not return anything, is that a problem? Commented Jul 10, 2018 at 18:28
  • I do not think so.. translate function must be a problem in term of not give a good object.. but it does not need to return anything Commented Jul 10, 2018 at 18:30
  • It makes the line element.html(translate(element.attr('i18n'))); seem strange to me Commented Jul 10, 2018 at 18:31
  • It works if json file like "tabSetup": "Set up". .It does not works if json file like "tabSetup": { "message": "Set up" } Commented Jul 10, 2018 at 18:36

1 Answer 1

1

function __tr has error, repair like this

function __tr(src) {
    return (dict[src].message || src);
}
Sign up to request clarification or add additional context in comments.

2 Comments

I bet this answer is close, maybe try return dict[src] ? dict[src].message : src
IrkenInvader your answer works. lex.xu , IrkenInvader you guys are amazing. i truly impressed by your skill

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.