jQuery国际化i18n--中文、英文、中文繁体

不念不忘少年蓝@ 2023-07-15 11:28 17阅读 0赞

关于jquery-i18n的了解，从零零散散的查阅拼凑起来，拼了一份完整的示例，[这个博主][Link 1]的这篇给了我很大帮助：  
首先，结构目录如下：  
![在这里插入图片描述][20200316205859804.png]  
jquery.i18n.js：

i18n文件夹下的三个.json文件，放入中英文繁体中文各自对应的翻译：  
i18n\_cn.json：

{
        "i18n.product": "产品与服务",
        "i18n.success-case": "解决方案",
        "i18n.custom-case": "客户案例"
     }

i18n\_en.json：

{
        "i18n.product": "products & service",
        "i18n.success-case": "success-case",
        "i18n.custom-case": "custom-case"
     }

i18n\_cnT.json：(注意：这里的后缀cnT是自定义起的，这个json文件放繁体中文)

{
        "i18n.product": "產品與服務",
        "i18n.success-case": "解决方案",
        "i18n.custom-case": "客戶案例"
     }

## index.html： ##

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jQ国际化</title>
        <style>
            .select_item{float:right;margin:12px 10px;font-family:"microsoft yahei";position:relative}
            .select_result{width:84px;line-height:38px;height: 50px; background: #666; text-align:center;border-radius:4px;text-indent:-8px;cursor:pointer;color:#fff;font-size:14px;cursor:no-drop}
            .select_result .triangle{border:5px solid transparent;border-top:5px solid #fff;position:absolute;top:16px;right:8px}
            .select_item ul{display:none;position:absolute;top:100%;right:0;height:111px;width:83px;background:#202833;border-radius:0 0 4px 4px;border-top-color:#f3f3f3;margin-top:-4px}
            .select_item ul li{text-align:center;cursor:pointer;line-height:35px;height:35px;color:#fff}
            .select_item ul li:hover{background:#000;font-weight:700}
        </style>
    </head>
    <body>
        <ul>
            <li>
                <span i18n="i18n.product">产品与服务</span>    
             </li>    
             <li>
                <span i18n="i18n.success-case">解决方案</span>
             </li>
             <li>
                <span i18n="i18n.custom-case">客户案例</span>
             </li>
        </ul>
        
        <div class="select_item clearfix left">
            <div class="select_module_con left">
                <div class="select_result"> 
                    <span></span> 
                    <div class="triangle"></div> 
                </div> 
                <ul> 
                    <li>中文</li>
                    <li>English</li> 
                    <li>繁体中文</li> 
                </ul> 
            </div> 
        </div>
    
    
        
        <script src="./js/jquery-1.11.3.js"></script>
        <script src="./js/jquery.i18n.js"></script>
        <script>
            /*默认语言en*/
            var defaultLang = "en"
            function languageSelect(defaultLang){
                $("[i18n]").i18n({
                    defaultLang: defaultLang,
                    filePath: "i18n/",
                    filePrefix: "i18n_",
                    fileSuffix: "",
                    forever: true,
                    callback: function(res) {}
                });
            }
            languageSelect(defaultLang);
            
            // 切换按钮
            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'){ 
                        defaultLang = "en",
                        languageSelect(defaultLang);
                    }else if (condition == '中文'){
                        defaultLang = "cn",
                        languageSelect(defaultLang);
                    }else {
                        defaultLang = "cnT",
                        languageSelect(defaultLang);
                    }
                })
                })
            }
            $(function(){
                select(); 
            })
    
        </script>
    </body>
    </html>

预览效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
ok，到这里一切就完了，当你高兴的把这些代码复制过去，准备预览时，发现控制台报了个错：  
![在这里插入图片描述][20200316211244997.png]  
于是又一次陷入蒙圈，仔细看了一下报错是跨域类的问题，第二个错是读取json文件报错，读取本地json文件的时候，出现了跨域，点进去源码看了报错位置，这个读取的时候用的是ajax方式，于是就把这个代码放在后台搭建的nginx服务器上，完美！！！

主要还是很感谢这个[博主][Link 1]，一路学习，时刻随行。

[Link 1]: https://blog.csdn.net/zeng092210/article/details/90949740
[20200316205859804.png]: /images/20230528/18052b2e25584413ae5e88139dee6ad2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230528/72aba48f4aa24723a70d4cf8620a43c4.png
[20200316211244997.png]: /images/20230528/6656c588bd6949c0a446b6231bf616b7.png