jquery 使用i8n 的坑点

作者: 宏_4491 | 来源:发表于2020-09-19 16:28 被阅读0次

jquery 使用i8n 的坑点
jquery 的 each 方法中 return 的坑
jQuery选择器
小程序 MD5 加密
vue 中使用webuploader
记爬过的坑
MUI 使用$的三种方式
jquery选择select
前端基础入门五（掌握jQuery的常用api，实现动态效果）
ajax使用注意

最近公司的官网需要做国际化，提出的需求是要实现中英文切换，所以我选择i18n 这个插件

1、先下载i18n 插件

https://github.com/jquery-i18n-properties/jquery-i18n-properties

image.png
我们这里只需要把 jquery.i18n.properties.js 文件拷贝到我们的项目中即可。

2、项目结构

js文件夹：在项目中引入jQuery，因为是基于JQuery的，和刚刚下载的 jquery.i18n.properties.js

image.png

3 、新建一个语言包文件夹

image.png

1、文件夹名是自己取的名字（lang），随便取什么都行，但是后面引入时，要一致。
2、在文件夹下面手动新建你所需要的语言包，我这边是中文和英文。（注意：文件名要规范，文件名_国家代号.properties。例如：strings_en.properties）

image.png

4、代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>国际化</title>
    <script src="./js/jquery-3.4.1.js"></script>
    <script src="./js/jquery.i18n.properties.js"></script>
</head>

<body>
    <button id='btn' data-locale="BtnChange">切换语言</button>
    <div>
        <p data-locale="Login">登录</p>
        <p data-locale="UserName">用户名：</p>
        <p data-locale="Password">密码：</p>
    </div>


    <script type="text/javascript">
        isEng = true
        btn.onclick = function () {
            if (!isEng) {
                loadProperties('en');
            } else {
                loadProperties('zh');
            }
            isEng = !isEng
        }
        function loadProperties(lang) {
            $.i18n.properties({
                name: 'strings',  //资源文件名称 ， 命名格式： 文件名_国家代号.properties
                path: 'lang/',    //资源文件路径，注意这里路径是你属性文件的所在文件夹,可以自定义。
                mode: 'map',     //用 Map 的方式使用资源文件中的值
                language: lang,  //这就是国家代号 name+language刚好组成属性文件名：strings+zh -> strings_zh.properties
                callback: function () {
                    $("[data-locale]").each(function () {
                        console.log($(this).data("locale"));
                        $(this).html($.i18n.prop($(this).data("locale")));
                    });
                }
            });
        }
        loadProperties('en');//调用
    </script>
</body>

</html>