html页面 通过jquery.i18n.properties添加多语言
第一步：
<div class="set_lang"><div class="lang_btn" data-langtype="zh">中文简体</div> | <div class="lang_btn" data-langtype="hk">中文繁體</div> |<div class="lang_btn" data-langtype="en">English</div>
</div>第二步：
<script src="./assets/jquery.i18n.properties.min.js"></script>
<script>/*本地运行需要配置服务，不然jquery-i18n-properties中的语言文件会跨域;Visual Studio Code 中下载LiveServer,index.html 右键运行 open width Live Serve*/$('.lang_btn').on('click', function () { //语言切换按钮let langType = $(this).attr('data-langtype')loadProperties(langType);})function loadProperties (lang) {$.i18n.properties({name: 'lang', //资源文件名称 ， 命名格式： 文件名_国家代号.propertiespath: './lang/', //资源文件路径，注意这里路径是你属性文件的所在文件夹,可以自定义cache: false,mode: 'map', //用 Map 的方式使用资源文件中的值language: lang, //国家代号 name+language刚好组成属性文件名：lang+en -> lang_en.propertiescallback: function () {for (var i in $.i18n.map) {$('[data-lang="' + i + '"]').text($.i18n.map[i]);}$(".search-input").attr('placeholder', $.i18n.map['search']);}});}loadProperties('en');
</script>第三步：
新建 lang文件夹
lang_en.properties
page_title = Security Center
enter_phone_number = Enter phone number
lang_hk.properties
page_title = 安全中心
enter_phone_number = 輸入電話號碼
第四步：
dom中使用：
<div data-lang="page_title">安全中心</div>
<div data-lang="enter_phone_number">输入电话号码</div>
js中使用：
$(".selected_name").text($.i18n.map['page_title']);
$(".search-input").attr('placeholder', $.i18n.map['search']);