最近项目需求需要在页面中实现一个点击标题栏展开效果,用户了解完内容后,可以重新点击标题栏,内容所在的div便收起。大概样式如下图:
实现思路大概是这样的,首先获取需要添加事件的标题栏,运用for循环为每个标题栏添加点击事件。在采用for为标题栏添加事件时,要注意js中的一个经典问题:
如图,再给aH3数组添加事件时,在回调函数中注意i值在点击时的变化,如果直接将i运用在回调函数中,每次点击页面i都为循环完成后的最大值,不能实现所需的点击第几个aH3,i 相应的显示值。处理方法大家可能都已非常清楚,一种是给aH3数组的每个元素添加相应的私有属性,如上图 ._index 属性,另一种是利用闭包,也就是在上图代码的闭包flag参数后面添加一个i参数和函数调用时也添加一个i值就可以,同样也可以解决。
啰嗦了半天,终于到了本篇博文的重点了,想要实现这种点击展开,再点击收回,肯定需要一个单独标示符,来控制事件的执行,就是上图中的flag。一开始,直接将flag运用在程序中,效果是能实现,在点击的过程中偶尔会出现超出预期的东西,那就是让我很心动的bug,找各种原因,忽然眼前一亮,这可能也是以上js经典问题所导致的。
分析如下:所有的aH3 数组都同时运用一个flag,点击两个标题栏,flag 为 “1”,再返回去点击其中一个标题栏,第一次点击会没有反应,再点击一次才会收缩,因为此时flag为1,所以会没有反应,当点击完后flag变为“0”,此时相应的div才会收缩回去。(语言表达的不清,逻辑有点混乱,呵呵 ,见谅)
针对以上病症,我就该下药了,关键是让aH3中的每个标题栏拥有不同的flag,所以运用闭包,让for循环时为每个aH3数组中的元素都拥有一个flag来保存自己的状态,这样就会把心动的bug给去除了!