最近放假闲来无事, 打开了这个实例索引,开始了第一个练习(巩固自己的垃圾基础2333~~).
附上demo地址: 我是demo1 我是demo2 我是案例demo
写的不好请多指教~
在demo1 和 demo2 的效果的效果是一样的,但是和案例demo增加了动画效果,实现过程很简单
-webkit-transition: all .5s;
transition: all .5s;
for实例
加上css3 的 transition 从而产生过渡效果,看起来比较自然(小把戏emmm~)
现在说说demo1 和 demo2 的区别
首先看一下for循环
for实例
输出 0 1 2 3 (当然是啊都说些废话~打嘴)
下面给点样式加点js
for实例
单击怎么输出了四个4 按道理不是输出 0 1 2 3 吗 怎么输出了数目 (这是一个错误的设置事件处理程序)
下面我们改进改进
for实例
这下o jier k 了 没问题了, 正确的输出了我们单击的序号
这个问题就是通过闭包来解决的,嘿嘿嘿~~~(对闭包理解还不是很透彻)
ps: 避免在循环中创建函数, 可能会带来无所谓的计算还会引起混淆,在循环外面创建一个辅助函数,让这个辅助的函数绑定一个当前i函数这样就不会导致混淆了.之前的例子绑定了i变量本身,而不是函数在构造时候的变量i的值 (引用某书的话)
下面开始说区别
for实例
这里的 i 和 this.index 都正确输出了0 1 2 3 4 因为他有五个input(哎╮(╯▽╰)╭ 又是废话)
案例把 i值 赋值给了 oBtn[i].index 控制台打印可以正确的输出0 1 2 3 4(我自己的个人理解,如果不对 大佬们多指正)
我的做法是是向之前那样写一个辅助函数
for实例
ok 大工告成, 完工休息, 文字不够图片来凑23333~~ dalao们多指教.
