首次进入界面弹出 选择语言框 根据不同语言请求不同数据参数 返给界面 等个代码 或者远程 像这个效果https://eifsads.com/
哈喽,可以使用localStorage把语言字段存起来,请求再获取。
1.设置
const nowSel = $("input[name = 'region']:checked").val() // 获取当前选中语言
localStorage.setItem('language',nowSel) // 本地缓存language设置为选中的语言
2.获取
const lang = localStorage.getItem('language') // 获取当前语言
$(`input[value='${lang}']`).attr('checked','true'); // 设置语言选中
console.log(lang);
我理解的你的需求是想要打开页面就弹出提示选择语言,选择之后界面上的内容也随之改变。这个功能可以做的简单一点,也可以做复杂一点,但是你想要页面上的内容随着你选择的语言自动翻译,这个就非常难了。
先说一下简单的一种:
将界面上需要跟着语言变化的内容都设置ID,选择语言之后修改对应的内容即可。
复杂一点的:
写一套json,面对应各个语言各个字符对应的翻译内容,比如:
{
中文:{id1:首页,id2:男装,id3:女装},
英文:{id1:home,id2:men's wear,id3:Women's wear}
}
如果还有其他语言就跟着加;
页面中写一个js方法,读取这个json,默认读取其中一个,比如默认读取的是中文版的,读取之后将中文版中对应的参数修改进页面中;然后监听语言选择框即可。
大概代码:
//选择语言框
<div id='demo'>
<input type='radio' name='language' value='cn' checked='checked'>中文
<input type='radio' name='language' value='en'>英文
</div>
<script>
//读取语言包Json
getJson=function(type){
//这个type就是语言对于的值,比如中文=cn,英文=en
//1.读取json
//2.遍历json将对于的值填入指定的位置(json的参数名称就是页面指定位置的id,值就是对于的语言的值)
}
//加载页面就调用此方法
getJson("cn");
//然后是弹出语言选择框
//这里是监听语言选择框,假如你语言选择是单选框
$("#demo :radio").on('click', function () {
var item= $(this).val();
console.log(item);
getJson(item);
})
</script>
希望对你有帮助!
用js 的cookie判断是否第一次加载:
function setCookie(name,value)
{
var Days = 1;//保存一天
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return true;
else
return false;
}
if(!getCookie('loading1')){//设置一个变量查看是否第一次加载,第一次加载就弹出语言框
}
vue项目的话,可以用VueI18n国际化插件,自己写配置两个语言包,可以进入页面的时候,识别用户计算机语言或者用户自己选择,然后存入session