案例练习第一课

最近放假闲来无事, 打开了这个实例索引,开始了第一个练习(巩固自己的垃圾基础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们多指教.