转换卡制作用原生JS代替for循环

开发工具与关键技术：前端

作者：黄志鹏

撰写时间：2019/1/16

在初学前端的时候，我们还没有熟用for循环，下面我们做一个转换卡，用原生的JS来代替for循环。

下面是用for循环的代码截图（案例）

下面是浏览器输出结果截图

俗话说万变不离其宗，其实我们的原生JS与for循环的运行逻辑一样，下面我们说说它的原理，虽说下面的代码比用for循环的代码多点，但是它很直观把运行原理给展示出来。

    var on = document.getElementsByClassName("on");先获得高亮的值

 zhr,zhs,zhy 分别是 转换一，转换二，转换三的一个id分别给它们一个点击事件

 zhk1，zhk2，zhk3 分别是显示内容区的 111，222，333.

举个例子;

给zhr一个点击事件，在这个函数中，可以直接把高亮这个类赋值给当前这个函数，而其余的ID则不把高亮这个类赋值给它们，让它们的值为空。

在HTML那边，我们事先只显示” 111”。
“222”，“333”则隐藏，

我们则在当前这个函数控制它们的显示和隐藏即可。比如在当前函数，我们让其相对应的内容显示出来，其余则隐藏。

下面是原生JS的代码截图

下面是浏览器输出结果

 通过上下的浏览器输出结果来看，其与用for循环的输出的结果是一模一样的。