页面切换语言的解决方法（偏向小站，静态页面）

首先在html结构中，把需要转换的结构都加上类名，最好加在含有 文本的最近的父级上，因为我们要利用文本节点来替换。

然后构造出类似json这种感觉的数据，方便替换操作。还有声明一个变量flag，记录当前使用的什么语言。

var flag = 'cn';
var langArr = [
  { 'en': '简体中文', 'cn': 'English' },
  { 'en': 'About me', 'cn': '关于我' },
  { 'en': 'Experience', 'cn': '学习经历' },
  { 'en': 'Skill tree', 'cn': '技能树' },
  { 'en': 'Call me', 'cn': '联系我' },
  { 'en': 'Zhuang Cheng Xiang', 'cn': '庄城祥' },
  { 'en': 'I am a Weber who loves life and enjoys learning.', 'cn': '我是一个爱生活，乐学习的Weber' },
  { 'en': 'The beginning of the front end', 'cn': '从零开始的前端' },
  { 'en': 'I have been interested in webpage technology very early,but I have never had a chance and enough time. In the freshman\'s winter vacation,I started to get started. Although the middle of the year has been intermittent,the difficulty has continued to rise, but I have not given up.I am fortunate to have grown up in this era of rapid web development.The ubiquitous tutorials, websites, and almost just beginning to learnare accompanied by the new features of this h5, c3, and ES6, which is exciting.', 'cn': '很早就对网站网页技术有兴趣，但一直没机会和足够的时间。在大一的寒假开始入门，到现在虽然中间断断续续,难度持续攀升,但姑且还没有放弃。我庆幸成长在这个web高速发展的年代。随处可见的教程,网站，几乎刚开始学习就伴随这h5,c3,ES6的新特性，这是令人兴奋的。' },
  { 'en': 'Advanced steps', 'cn': '进阶的步子' },
  { 'en': 'Career has higher requirements, and ever-increasing mobile devices requirea good experience. The browser keeps updating and gradually reaching the specification,and new technologies are applied. This is a challenge for the old technology and a mustfor every front end.', 'cn': '职业有了更高的要求，不断增加的移动设备，更是需要良好的体验。浏览器不停的更新并逐渐达到规范，新技术得以应用。这对旧技术是挑战同时也是每一个前端都是必经之路。' },
  { 'en': 'Road resistance and length', 'cn': '道阻且长' },
  { 'en': 'At the same time, it is even more difficult for novices. The ever-increasing contentof ES6 requires a solid foundation of js, various framework principles, and countlesslibraries. However, the cool page presented to people\'s vision -the sense of accomplishment, gave me reasons to move forward.', 'cn': '同时对于新手，就更是不易。不断增加的ES6内容，需要巩固的js基础，各种框架原理，还有数不清的类库。但是，呈现给人们视野中的炫酷网页——成就感，给了我前进的理由。' },
  { 'en': 'Stronger wings', 'cn': '羽翼渐丰' },
  { 'en': 'The deeper I learn, the more I know that I know less,and it has inspired my passion and interest in learning.Gradually have a general concept of the front end,the goal is more clear. Not impetuous, humbly learning, accumulate richly and break forth vastly.', 'cn': '学的越深入，越知道自己懂得少，更激发了我的学习热情和兴趣。逐渐对前端有了大体的概念，目标更明确。不浮躁，虚心学习，厚积而薄发。' },
  { 'en': 'Roast me', 'cn': '吐槽我吧' },
  { 'en': 'Foundation', 'cn': '基础' },
  { 'en': 'Proficiency in English html,css,javascript', 'cn': '熟练应用html,css,javascript' },
  { 'en': 'Understand jQuery/Nodejs', 'cn': '了解jQuery/Nodejs' },
  { 'en': 'Understand basic web security issues', 'cn': '了解基本web安全问题' },
  { 'en': 'Understand semanticization', 'cn': '了解语义化' },
  { 'en': 'Understand common algorithms', 'cn': '了解常用算法' },
  { 'en': 'Promotion', 'cn': '提升' },
  { 'en': 'Familiar with html5,css3', 'cn': '熟悉html5,css3' },
  { 'en': 'Understand ES6', 'cn': '了解ES6' },
  { 'en': 'Understand sass/less', 'cn': '了解sass/less' },
  { 'en': 'Learn about some browser compatibility issues', 'cn': '了解部分浏览器兼容问题' },
  { 'en': 'Learn about some performance improvement issues', 'cn': '了解部分性能提升问题' },
  { 'en': 'Understand Vue and other mvvm framework', 'cn': '了解Vue等mvvm框架' },
  { 'en': 'Call me', 'cn': '联系我' }
]

接着就是逻辑上了，点击时如果当前语言为中文（cn）则遍历langArr数组，依次对应将文本节点的值替换，这就要求html带有文字结构的顺序必须和数组的语言数据的顺序是一致的。这样才能通过遍历通过对应的序号，替换值。然后替换完后，要把当前的语言状态也修改了，当前为英文（en）。

// $(".langSwitch:eq(0)").text(langArr[0].flag);
// var leng1 = $(".langSwitch").length;
var leng2 = langArr.length;
// console.log(leng2);
// console.log(leng1);
// console.log(langArr[0].en);
// console.log($(".langSwitch:eq(0)").text());

// 通过对应的文本节点遍历转换成对应的语言，flag为当前的语言
$(".toggle-inner,.label-text").click(function () {
  if (flag == 'cn') {
    for (let i = 0; i < leng2; i++) {
      $(".langSwitch:eq(" + i + ")").text(langArr[i].en);
    }
    flag = 'en';
  } else {
    for (let j = 0; j < leng2; j++) {
      $(".langSwitch:eq(" + j + ")").text(langArr[j].cn);
    }
    flag = 'cn';
  }
  // console.log("after "+flag);
});

如此一来，一个相对简单的，语言切换就完成了，如图。

你也可以移步到www.peanutone.com

网上也有其他比较复杂的方法，大多是后端操作，本文仅供参考。

打赏