使用jquery.i18n.js

需要引入jquery

.html文件引入

<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.i18n.js"></script>

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

根目录下新建文件夹 i18n
在文件夹i18n新建i181_cn.json

{
    "i18n.menu-introduction": "集团介绍",
    "i18n.menu-business": "业务领域",
    "i18n.menu-product": "产品服务",
    "i18n.menu-news": "新闻中心",
    "i18n.menu-contact": "联系我们"
}

在文件夹i18n新建i181_en.json

{
    "i18n.menu-introduction": "INTRODUCTION",
    "i18n.menu-business": "BUSINESS",
    "i18n.menu-product": "PRODUCT",
    "i18n.menu-news": "NEWS",
    "i18n.menu-contact": "CONTACT"
}

这两个文件存放语言包，如果有需求可以建更多个语言包

在html中使用

<span i18n="i18n.menu-introduction">集团介绍</span>
<span i18n="i18n.menu-business">业务领域</span>
<span i18n="i18n.menu-product">产品服务</span>
<span i18n="i18n.menu-news">新闻中心</span>
<span i18n="i18n.menu-contact">联系我们</span>

切换时方法

function languageSelect(defaultLang) {
    $("[i18n]").i18n({
        defaultLang: defaultLang,
        filePath: "../i18n/",
        filePrefix: "i18n_",
        fileSuffix: "",
        forever: true,
        callback: function (res) {
            // console.log(res)
        }
    });
}

filePath 语言包文件目录，filePrefix 这个字段可以看一下我们语言包文件名，对应匹配的。

重点来了！！！

当切换语言时，调用languageSelect(defaultLang)，参数为语言包后缀cn,en....

栗子

当我切换时
我在index.html

<script>
    if(!sessionStorage.getItem('__bdht_lan')){
        sessionStorage.setItem('__bdht_lan',"cn")
    }
</script>

我在 index.html 存储了一个{__bdht_lan: "cn"}

sessionStorage.setItem("__bdht_lan","en");
var defaultLang = sessionStorage.getItem("__bdht_lan");
languageSelect(defaultLang);

后面每次切换时更改这个变量为当前 语言，然后去调用
这么做为的是所有页面都可以去响应！

到这里就配置好了！

如果报错没有服务，自己在本地配置一个环境 。例如 express