多国语言切换

最新推荐文章于 2022-09-13 11:45:52 发布

瑞瑞小同学

最新推荐文章于 2022-09-13 11:45:52 发布

阅读量494

点赞数

本文链接：https://blog.csdn.net/yr123456654321/article/details/102739944

版权

这个我觉得主要的是自定义属性的应用，将语言类型lang与自定义name值data-lau=" " 分别与数组中语言类型与value值对应。

html:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title data-lau="yan">jq多语言</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

<body>
<select>
<option value="zh">中文</option>
<option value="en">English</option>
</select>
<div style="padding-left: 30px">
   <h1 data-lau="haha">语言</h1>
   <span data-lau='youyou'>切换</span>
   <script src="js/jq-lau.js"></script>
</div>
</body>

</html>

js:

(function(){
   //设置语言
   var language={
   zh:{
       yan:'jq多语言',
       haha:'语言',
       youyou:'切换',
   },
   en:{
       yan:'jq duo yu yan',
       haha:'language',
       youyou:'switch',
   }

}

var lang=$('select').val();
console.log(lang)
$('select').click(function(){

   lang=$('select').val();
   console.log(lang)
   $('[data-lau]').each(function(e){
       console.log(lang)
       var name=$(this).data('lau')

       if(lang=='zh'){

           $(this).text(language.zh[name])
       }else{
           $(this).text(language.en[name])
       }
   });
})
//把语言赋值上去

})();

瑞瑞小同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
多国语言切换

这个我觉得主要的是自定义属性的应用，将语言类型lang与自定义name值data-lau=" " 分别与数组中语言类型与value值对应。html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title data-lau="yan">jq多语...
复制链接

扫一扫