首次加载事件 和选择不同 请求不同参数 显示不同效果

首次进入界面弹出 选择语言框 根据不同语言请求不同数据参数 返给界面 等个代码 或者远程 像这个效果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

img

img