使用jquery实现中英文切换

中英文切换有很多种方式，现在就基于jquery的一种方式，使用的是：jquery.i18n.js 

1，首先先引入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);

注意filePath: "./i18n/",是json文件的路径

3.新建i18n文件夹，里面就是需要转换的字段，i18n_cn.json:

i18n_en.json:

4.在html中编辑内容：

<div class="login-header">
   <div class="switch" style="margin:0 0 20px 0">
      <select class="trans-en" style="border:none;outline:none;border-radius: 3px;width: 100px;padding-left: 10px;">
        <option value="中文">中文</option>
        <option value="English">English</option>
      </select>
    </div>
    <span class="welcome_text" i18n="welcomeIn">欢迎登入</span>
</div>

在需要中英文切换的地方加上i18n属性就行

5.通过下拉选择切换：

/*默认语言*/
$(document).ready(function() {
	var defaultLang='cn';
	function getLang(){
		if (document.cookie.indexOf('grycan.cn.bLang') != -1) {
			var arrCookie = document.cookie.split(';')
			for (let i = 0; i < arrCookie.length; i++) {
				var arr = arrCookie[i].split('=');
				if ('grycan.cn.bLang' == arr[0].trim()) {
					defaultLang = arr[1];
					languageSelect(defaultLang);
					if (defaultLang == 'en') {
						$('.trans-en').val('English')
					} else if(defaultLang == 'cn') {
						$('.trans-en').val('中文')
					}
					break;
				}
			}
		}
	}
	getLang();
	/*调用语言包*/
	function languageSelect(defaultLang) {
		$("[i18n]").i18n({
			defaultLang: defaultLang,
			filePath: "./i18n/",
			filePrefix: "i18n_",
			fileSuffix: "",
			forever: true,
			callback: function(res) {
				
			}
		});
	}
	languageSelect(defaultLang)
	// 设置cookie
	function setLang(name,value,path){
		var Days = 30; 
		var exp = new Date(); 
		exp.setTime(exp.getTime() + Days*24*60*60*1000); 
		var paths = ";path=" + path;
		document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() +paths;
	}
	$('.trans-en').change(function(){
		var condition = $(this).val();
		if(condition == 'English'){
			defaultLang = 'en';
			setLang('grycan.cn.bLang','en','/');
            window.localStorage.setItem('langType','en')
		}else if(condition == '中文'){
			defaultLang = 'cn';
			setLang('grycan.cn.bLang','cn','/');
            window.localStorage.setItem('langType','zh')
		}
		getLang();
		// document.location.reload(true);
	})
})
// end