JS静态页面交互

Question

Hi，我是一个交互设计师，完全js小白，希望给位大神指点一下。这是一个静态的网页，用来做交互原型的，不需要和后台任何数据库交互。工作流是：
1. 这是一个填写旅客信息的模块：

2. 用户填写完旅客信息，滚动到选择保险模块

3. 当用户完成选择了任意一个保险计划的时候，上面一图中的旅客信息变成这个静态的显示：

4. 当用户点击edit之后，需要展开成1图中的表格，但是已经有之前填了的信息在里面了。

主要开发难点：
1. 如何选择了保险之后把之前填信息的表格变成静态的text显示
2. 点击text显示里面的edit之后需要能再次展开表格里面保有之前填过的信息。

本人代码白痴，跪求大神指点！！！

Answer 1

https://angularjs.org/

浓浓的用AngularJS实现的气氛……

Answer 2

原型没必要用JS实现啊，直接用Axure之类的原型工具，就算数据不会随着表单里填的值变化也无所谓的

Answer 3

这是一个相对复杂的单页应用。
题主如果要自己快速学习js来完成任务的话，建议学习jquery，可以参考《锋利的jquery》。细节实现有问题，google一般都有。

对于开发难点：
1. 通过jquery可以获得表单内元素的值，例如$('input').val()，获得值后，通过在页面上重新插入DOM元素($().append)，把值在页面上显示
2. 同样，设置form内元素的值，可以使用$('input').val('your value')

如果题主想要提升自己的js水平，建议从原生js语法、DOM API等等开始学起。

至于angularjs，还是需要一定js经验的，不建议题主学习。

Answer 4

很简单，你每一块做两套，一套是带input的可编辑状态，一套是不可编辑文本状态，初始时编辑状态显示，不可编辑块隐藏，然后页面载入jquery，你绑定click事件到你想要做切换操作的元素上，一个show,一个hide就可以了。

ps，用啥augular.js 犯不着啊，只是一个原型而已

补充，没看到说信息还要带进来是吧，照样用jquery，切换的时候把信息抓过去就行了

Answer 5

augular.js 上手难度挺大的。 还是用jquery比较实在。