First of all, in the html structure, add the class name to all the structures that need to be converted, preferably to the nearest parent containing the text, because we need to use the text node to replace them.
Then construct data similar to json to facilitate replacement operation. You can also declare a variable flag to record what language is currently used.
var flag = 'cn'; var langArr = [ {'en':'Simplified Chinese','cn':'English'}, {'en':'About me','cn':'About me'}, {'en':'Experience','cn':'Learning experience'}, {'en':'Skill tree','cn':'Skill tree'}, {'en':'Call me','cn':'Contact me'}, {'en':'Zhuang Cheng Xiang','cn':'Zhuang Cheng Xiang'}, {'en':'I am a Weber who loves life and enjoys learning.','cn':'I love life and enjoy learning Weber'}, {'en':'The beginning of the front end','cn':'Front end from scratch'}, {'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':'I've been interested in Web technology for a long time, but I haven't had the chance and enough time. I started to get started in the winter vacation of freshman year, but now I'm in the middle of it intermittently,Difficulty continues to rise,But let's not give up. I'm glad I grew up here web The era of rapid development. Tutorials everywhere,Website, almost at the beginning of learning h5,c3,ES6 This is exciting.'}, {'en':'Advanced steps','cn':'Advanced steps'}, {'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':'The occupation has higher requirements, the increasing mobile devices, but also need a good experience. The browser keeps updating and gradually reaches the standard, and the new technology can be applied. This is a challenge for the old technology and a necessary way for every front end.'}, {'en':'Road resistance and length','cn':'Road obstruction and long'}, {'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':'At the same time, it is not easy for the novice. Increasing ES6 Content, need to be consolidated js Foundation, various framework principles, and countless class libraries. However, the cool web page presented to people's vision - the sense of achievement, gave me a reason to move forward.'}, {'en':'Stronger wings','cn':'Wings grow rich'}, {'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':'The deeper I learn, the less I know, and the more I inspire my enthusiasm and interest in learning. Gradually, we have a general concept of the front end and a clearer goal. Not impetuous, modest learning, thick and thin hair.'}, {'en':'Roast me','cn':'Tucao, I will.'}, {'en':'Foundation','cn':'Basics'}, {'en':'Proficiency in English html,css,javascript','cn':'Skilled application html,css,javascript'}, {'en':'Understand jQuery/Nodejs','cn':'understand jQuery/Nodejs'}, {'en':'Understand basic web security issues','cn':'Understand the basic web safety problem'}, {'en':'Understand semanticization','cn':'Understanding semantics'}, {'en':'Understand common algorithms','cn':'Understand common algorithms'}, {'en':'Promotion','cn':'Promote'}, {'en':'Familiar with html5,css3','cn':'be familiar with html5,css3'}, {'en':'Understand ES6','cn':'understand ES6'}, {'en':'Understand sass/less','cn':'understand sass/less'}, {'en':'Learn about some browser compatibility issues','cn':'Understanding some browser compatibility issues'}, {'en':'Learn about some performance improvement issues','cn':'Understand some performance improvement issues'}, {'en':'Understand Vue and other mvvm framework','cn':'understand Vue etc. mvvm frame'}, {'en':'Call me','cn':'Contact me'} ]
Then logically, if the current language is Chinese (cn) when clicking, the langArr array will be traversed and the values of the text nodes will be replaced in turn, which requires that the order of html with text structure must be consistent with the order of the language data of the array. In this way, the corresponding sequence number can be traversed to replace the value. After the replacement, the current language status should also be modified, which is currently English (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()); // Through the traversal of the corresponding text node, the corresponding language is converted, and flag is the current language $(".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); });
In this way, a relatively simple language switch is completed, as shown in the figure.
You can also move to www.peanutone.com
There are other complex methods on the Internet, most of which are back-end operations. This article is for reference only.