i18n国际化（页面中英文切换）

1.基于jquery,先引入jQuery

2.引入jquery.i18n.js（这个源码应该不完全，但是能用）

(function ($) {
  $.fn.extend({
    i18n: function (options) {
      var defaults = {
        lang: "",
        defaultLang: "",
        filePath: "/i18n/",
        filePrefix: "i18n_",
        fileSuffix: "",
        forever: true,
        callback: function () {},
      };

      function getCookie(name) {
        var arr = document.cookie.split("; ");
        for (var i = 0; i < arr.length; i++) {
          var arr1 = arr[i].split("=");
          if (arr1[0] == name) {
            return arr1[1];
          }
        }
        return "";
      }

      function setCookie(name, value, myDay) {
        var oDate = new Date();
        oDate.setDate(oDate.getDate() + myDay);
        document.cookie = name + "=" + value + "; expires=" + oDate;
      }

      var options = $.extend(defaults, options);

      if (
        getCookie("i18n_lang") != "" &&
        getCookie("i18n_lang") != "undefined" &&
        getCookie("i18n_lang") != null
      ) {
        defaults.defaultLang = getCookie("i18n_lang");
      } else if (options.lang == "" && defaults.defaultLang == "") {
        throw "defaultLang must not be null !";
      }

      if (options.lang != null && options.lang != "") {
        if (options.forever) {
          setCookie("i18n_lang", options.lang);
        } else {
          $.removeCookie("i18n_lang");
        }
      } else {
        options.lang = defaults.defaultLang;
      }

      var i = this;
      $.getJSON(
        options.filePath +
          options.filePrefix +
          options.lang +
          options.fileSuffix +
          ".json",
        function (data) {
          var i18nLang = {};
          if (data != null) {
            i18nLang = data;
          }

          $(i).each(function (i) {
            var i18nOnly = $(this).attr("i18n-only");
            if ($(this).val() != null && $(this).val() != "") {
              if (
                i18nOnly == null ||
                i18nOnly == undefined ||
                i18nOnly == "" ||
                i18nOnly == "value"
              ) {
                $(this).val(i18nLang[$(this).attr("i18n")]);
              }
            }
            if ($(this).html() != null && $(this).html() != "") {
              if (
                i18nOnly == null ||
                i18nOnly == undefined ||
                i18nOnly == "" ||
                i18nOnly == "html"
              ) {
                $(this).html(i18nLang[$(this).attr("i18n")]);
              }
            }
            if (
              $(this).attr("placeholder") != null &&
              $(this).attr("placeholder") != ""
            ) {
              if (
                i18nOnly == null ||
                i18nOnly == undefined ||
                i18nOnly == "" ||
                i18nOnly == "placeholder"
              ) {
                $(this).attr("placeholder", i18nLang[$(this).attr("i18n")]);
              }
            }
          });
          options.callback();
        }
      );
    },
  });
})(jQuery);

3.语言json文件引入(内容可以自己改为需要的)

i18n_cn.json-----中文语言

{
    "i18n.themselves": "关于我们",
    "i18n.successful-case": "成功案例"
 }

i18n_en.json-----英语语言

{
    "i18n.themselves": "ABOUT US",
    "i18n.successful-case": "FUNCTOR"
}

4.给需要中英文转换的元素添加类名

 <h1 i18n="i18n.themselves">关于我们</h1>
 <h1 i18n="i18n.successful-case">成功案例</h1>

5.添加js代码

 languageSelect("en");//默认显示的语言
      function languageSelect(defaultLang) {
        $("[i18n]").i18n({
          defaultLang,
          filePath: "./",//json语言文件所在的路径
        });
      }