jq及以前時代的國際化手段

時間 2019-12-09

原文原文鏈接

<body>
    <select onchange="changeLang(event)">
      <option value="cn">中文</option>
      <option value="en">英文</option>
    </select>
    <div id="template1">
      {index01}
      <div>{index02}</div>
    </div>
  </body>
複製代碼

// 保存模版
  var template = document.querySelector("#template1").innerHTML;

  // json 文件
  var lang = {
    en: {
      index01: "Hello world",
      index02: "I love javascript."
    },
    cn: {
      index01: "你好世界",
      index02: "我愛javascript。"
    }
  };

  // select 改變事件
  function changeLang(event) {
    // 獲取當前語言
    var currentLang = event.target.value;
    autoReplaceTextWithLang(currentLang);
  }

  // 替換模版中 {index**} 的函數
  function autoReplaceTextWithLang(currentLang) {
    var dom = document.querySelector("#template1");
    dom.innerHTML = template
      .replace(/{index01}/, lang[currentLang].index01)
      .replace(/{index02}/, lang[currentLang].index02);
  }
  // 初始化顯示中文
  autoReplaceTextWithLang("cn");

複製代碼

效果:javascript

相關標籤/搜索