js实现中英⽂切换（jquery.i18n.js）jquery.i18n.js 实现中英⽂切换
⽅法
由于在公司官⽹所⽤到中英⽂切换功能，代码时js、jq写的。个⼈简单记录⼀下过程：
1. ⽤的⽅法是 jquery.i18n.js。
2. jquery.i18n不多介绍，⽹上有很多相关的东东。
⽤法
1. ⽤法是在html页⾯中引⼊jquery.i18n.js⽂件。
2. 在jquery.i18n.js中配置⼀下json语⾔包路径。
3. 在对应⽂件夹下引⼊编写语⾔json⽂件
4. 显⽰内容标签中加⼊⾃定义属性
5. 点击切换
步骤
1.jquery.i18n.js代码，
(function($){
$.fn.extend({
i18n:function(options){
var defaults ={
lang:"",
defaultLang:"",
filePath:"/i18n/",
filePrefix:"i18n_",
fileSuffix:"",
forever:true,
callback:function(){}
};
function getCookie(name){
var arr = kie.split('; ');
for(var i =0; i < arr.length; i++){
var arr1 = arr[i].split('=');
if(arr1[0]== name){
return arr1[1];
}
}
return'';
};
function setCookie(name, value, myDay){
var oDate =new Date();
oDate.Date()+ myDay);
}else if(options.lang ==""&& defaults.defaultLang ==""){
}else if(options.lang ==""&& defaults.defaultLang ==""){
throw"defaultLang must not be null !";
};
if(options.lang !=null&& options.lang !=""){
if(options.forever){
setCookie('i18n_lang', options.lang);
}else{
$.removeCookie("i18n_lang");
jquery的attr属性
}
}else{
options.lang = defaults.defaultLang;
};
var i =this;
$.getJSON(options.filePath + options.filePrefix + options.lang + options.fileSuffix +".json",function(data){ var i18nLang ={};
if(data !=null){
i18nLang = data;
}
$(i).each(function(i){
var i18nOnly =$(this).attr("i18n-only");
if($(this).val()!=null&&$(this).val()!=""){
if(i18nOnly ==null|| i18nOnly == undefined || i18nOnly ==""|| i18nOnly =="value"){
$(this).val(i18nLang[$(this).attr("i18n")])
}
}
if($(this).html()!=null&&$(this).html()!=""){
if(i18nOnly ==null|| i18nOnly == undefined || i18nOnly ==""|| i18nOnly =="html"){
$(this).html(i18nLang[$(this).attr("i18n")])
}
}
if($(this).attr('placeholder')!=null&&$(this).attr('placeholder')!=""){
if(i18nOnly ==null|| i18nOnly == undefined || i18nOnly ==""|| i18nOnly =="placeholder"){
$(this).attr('placeholder', i18nLang[$(this).attr("i18n")])
}
}
});
options.callback();
});
}
});
})(jQuery);
jquery.i18n.js代码中能看出是依赖jquery的，所以jquery需在前引⼊。
2.配置json路径就是配置filePath的路径
filePath:"/i18n/",//起始/是同⼀级开始  i18n⽂件夹中放⼊json语⾔包
3. 编写json⽂件
我个⼈⽬录如下
i18n_cn.json、i18n_en.json是中⽂和英⽂json，内容编写为定义⼀个对象，往对象中塞键值。
{
"i18n.themselves":"关于我们",
"i18n.successful-case":"成功案例",
"i18n.Intelligence-test":"AI智能考场",
"i18n.evaluation":"AI远程考评",
"i18n.practice":"AI智能练习",
"peration":"诚邀合作",
"i18n.login":"登录",
}
{
"i18n.themselves":"ABOUT US",
"i18n.successful-case":"FUNCTOR",
"i18n.Intelligence-test":"SITE",
"i18n.evaluation":"EVALUATION",
"i18n.practice":"PRACTICE",
"peration":"COOPERATE",
"i18n.login":"LOGIN",
}
4. html标签中加⼊⾃定义属性和设置默认显⽰语⾔
<li class="anchor"_t_nav="product">
<h2 ><a href="#"class="blueStreak"><span i18n="i18n.themselves">关于我们</span><div class="movableLine"></div></a></h2>
</li>    // i18n="i18n.successful-case"⾃定义属性
<li class="anchor"_t_nav="wechat">
<h2><a href="#"class="blueStreak"><span i18n="i18n.successful-case">成功案例</span><div class="movableLine"></div></a></h2> </li>
<li class="anchor"_t_nav="solution">
<h2><a href="#"class="blueStreak"><span i18n="i18n.Intelligence-test">AI智能考场</span><div class="movableLine"></div></a></h2> </li>
/
*默认语⾔*/
var defaultLang ="cn"
function languageSelect(defaultLang){
$("[i18n]").i18n({
defaultLang: defaultLang,
filePath:"./i18n/",
filePrefix:"i18n_",
fileSuffix:"",
forever:true,
callback:function(res){}
});
}
languageSelect(defaultLang);
5.点击切换
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'){
console.log(condition)
defaultLang ="en",
languageSelect(defaultLang);
}else{
defaultLang ="cn",
languageSelect(defaultLang);
}
})
})
}
$(function(){
select();
})
需要注意的是⽂件地址配置
到此简单中英⽂切换就实现了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。