jquery-i18n 多語言切換

參考博客：https://www.jianshu.com/p/8b4c63e1cf25

准備

1.下載jquery和jquery-i18n-properties

i18n地址：https://github.com/jquery-i18n-properties

代碼

參考博客：https://www.jianshu.com/p/8b4c63e1cf25

js代碼（核心部分）

注意

1.查找路徑是，path + name + '_' +language + '.properties',所以這三個參數很重要。也是通過，language參數的變化，進行多語言切換的。

2.自定義的元素屬性是data-lang='配置的key值'，當然這個元素屬性可以自己定義，例如lang-detail等等

  jQuery.i18n.properties({//加載資瀏覽器語言對應的資源文件
        name: 'lang', //資源文件名稱
        path:'./lang/', //資源文件路徑
        language: tmp_lang,
        cache: false,
        mode:'map', //用Map的方式使用資源文件中的值
        callback: function() {//加載成功后設置顯示內容
          for(var i in $.i18n.map){// 
            $('[data-lang="'+i+'"]').text($.i18n.map[i]);
          }
          // document.title = $.i18n.map['title'];
        }
      });

html部分

1.引入i18n的js;

2.配置data-lang(自定義)的多語言切換key值

<h2 class="title" data-lang="grantAttributionManagement">授予歸屬管理</h2>

配置文件properties

1.地址，上面已經說了

2.名稱上面也已經提及，按照格式就行

# lang_zh.properties
switch=切換成繁體
incentivePlanManagement=激勵計划管理
incentivePlanDetail=高度定制化的計划管理，多維度報表

存在問題

問題描述：加載properties文件出現跨域的問題；

問題原因：

因為是本地打開靜態html文件，file的請求方式，所以出現這種問題

問題解決

1.通過瀏覽器設置跨域參數

2.使用VSCODE軟件的liver Serve 打開