接口测试平台代码实现67: 多接口用例-7
我们目前进度，已经实现了小步骤的增加/删除功能，并且完美关联好了 执行顺序这个字段。
本节我们打造它的编辑功能。编辑功能我们计划包含对其各种设置。
出现效果是点击后 屏幕右侧滑出和左侧div 对称的div。然后点击不同的步骤时候，也类似的进行快速切换。
然后其上有取消，保存按钮。
好，我们打开P_case.html，先仿照我们写left_div的时候，写一个right_div，但是位置动画参数均相反。
然后是对应的显示/隐藏 的js函数：
简单写完之后，我们先给设置成，点击任意小步骤，都会启动这个show_step函数吧～
上图中，众所周知，我们小步骤的列表生成，是在这个refresh_left_div函数中的。我们找到生成的这个列表中具体的这个步骤按钮，我们设计的步骤本身就是个长按钮，现在给它加上onclick属性吧，注意这里因为要带参数，所以嵌套了一层funciton。
传入的内容是步骤id和名字。
写好后，我们刷新页面，试试效果：
点击任意小步骤右侧都会弹出这个白板了，点击其他的步骤，这个白板会快速回去重新弹出来。
好我们接着开始在上面填东西。
首先是按照我们左右对称的习惯，给小步骤的id,名字都显示在底部，代码仿照左侧大用例的span：
如上图，注意数据流传递过程中的大小写别写错了。
刷新页面看看是否成功：
成功后，我们继续写好顶部的俩个按钮，取消/保存。
俩个按钮我们都调用这个 关闭函数close_right_div。先写好这一步，注意left/right的各处应用。然后试试效果：
确认点击保存/取消后，右侧的div消失，就算成功。
看看按钮：
然后我们保存/取消都调用同一个函数，那么如何区分呢？
就是我们给他们传入的参数不同来区分：
一个传 “save” 一个传空字串。
然后在这个关闭函数中用if做判断：
关于这个保存的脚本代码，其实就是简单的获取我们到时候 右侧div的一堆输入框的内容，加上这个步骤id，传递给后台，让后台给更新到数据库即可。
本节内容到此为止。欢迎持续关注哦～
作者：我去热饭
链接：https://juejin.cn/post/7048089334848225294