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',  //资源文件名称 ， 命名格式： 文件名_国家代号.properties
			path: './lang/',    //资源文件路径，注意这里路径是你属性文件的所在文件夹,可以自定义
			cache: false,
			mode: 'map',     //用 Map 的方式使用资源文件中的值
			language: lang,  //国家代号 name+language刚好组成属性文件名：lang+en -> lang_en.properties
			callback: 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']);