本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考,具体如下:
背景
最近做了一个小系统,其中需要在页面对用户的好友进行增删改查。本来没有那么复杂,用表格形式就可以相对容易的实现。
但是考虑到用户的体验度,首先添加尽量不想用输入,就采用将所有用户分类显示,然后点击即可添加。
添加的用户同时在界面显示,显示出用户当前的好友。同时点击已经添加好的好友可进行下一部的业务操作。
当然,删除的操作是仿照手机端那样,右上角有一个红色的“x”,点击该好友即可删除。
最后界面还能退出删除的模式,恢复正常的模式。
功能说明
1. 添加用户:在列表中点击即添加用户,同时添加onclick事件 2. 删除用户:点击该好友即可删除 3. 进入删除模式:将界面改为删除模式,切换onclick事件 4. 恢复正常模式:将界面改为正常模式,切换onclick事件
图片展示
代码