js实现中英文切换（jquery.i18n.js）

jquery.i18n.js 实现中英文切换

方法

由于在公司官网所用到中英文切换功能，代码时js、jq写的。个人简单记录一下过程：

1. 用的方法是 jquery.i18n.js。
2. jquery.i18n不多介绍，网上有很多相关的东东。

用法

1. 用法是在html页面中引入jquery.i18n.js文件。
2. 在jquery.i18n.js中配置一下json语言包路径。
3. 在对应文件夹下引入编写语言json文件
4. 显示内容标签中加入自定义属性
5. 点击切换

步骤

1.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);

jquery.i18n.js代码中能看出是依赖jquery的，所以jquery需在前引入。

2.配置json路径就是配置filePath的路径

	filePath: "/i18n/",    //起始/是同一级开始  i18n文件夹中放入json语言包

3. 编写json文件
   我个人目录如下
   i18n_cn.json、i18n_en.json是中文和英文json，内容编写为定义一个对象，往对象中塞键值。

   	{
   	    "i18n.themselves": "关于我们",
   	    "i18n.successful-case": "成功案例",
   	    "i18n.Intelligence-test": "AI智能考场",
   	    "i18n.evaluation": "AI远程考评",
   	    "i18n.practice": "AI智能练习",
   	    "i18n.cooperation": "诚邀合作",
   	    "i18n.login": "登 录",
   	 }
   

   	{
   	    "i18n.themselves": "ABOUT US",
   	    "i18n.successful-case": "FUNCTOR",
   	    "i18n.Intelligence-test": "SITE",
   	    "i18n.evaluation": "EVALUATION",
   	    "i18n.practice": "PRACTICE",
   	    "i18n.cooperation": "COOPERATE",
   	    "i18n.login": "LOGIN",
   	}
   

4. html标签中加入自定义属性和设置默认显示语言

<li class="anchor" _t_nav="product">
   <h2 > <a href="#" class="blueStreak"><span i18n="i18n.themselves">关于我们span> <div class="movableLine">div>a> h2>
li>    // i18n="i18n.successful-case"自定义属性
<li class="anchor" _t_nav="wechat">
    <h2> <a href="#" class="blueStreak"><span i18n="i18n.successful-case">成功案例span><div class="movableLine">div>a> h2>
li>
<li class="anchor" _t_nav="solution">
    <h2> <a href="#" class="blueStreak"><span i18n="i18n.Intelligence-test">AI智能考场span><div class="movableLine">div>a> h2>
li>

/*默认语言*/
    var defaultLang = "cn"
    function languageSelect(defaultLang){
        $("[i18n]").i18n({
            defaultLang: defaultLang,
            filePath: "./i18n/",
            filePrefix: "i18n_",
            fileSuffix: "",
            forever: true,
            callback: function(res) {}
        });
    }
    languageSelect(defaultLang);

5.点击切换

function select(){
        $(document).click(function(){
          $(".select_module_con ul").slideUp();
        })
        var module=$(".select_result"); 
        module.click(function(e){
          e.stopPropagation();
          var ul=$(this).next();
          ul.stop().slideToggle();
          ul.children().click(function(e){
            e.stopPropagation();
            $(this).parent().prev().children("span").text($(this).text());
            ul.stop().slideUp();
            var condition = $(this).text();  //根据按钮显示  中 文/English  
            if(condition == 'English'){   
                console.log(condition)
                defaultLang = "en",
                languageSelect(defaultLang);
            }else{
                defaultLang = "cn",
                languageSelect(defaultLang);
            }
          })
        })
    }
    $(function(){
        select(); 
    })

需要注意的是文件地址配置

到此简单中英文切换就实现了