forEach
- 遍历数组，没有任何返回值
- 不能终止遍历（return、continue、break都失效）
- forEach会锁定对象，遍历时不能修改对象
在下面这段代码中，使用forEach方法。
每点击一次数组中的元素，就会执行对应的onclick方法
// 给所有的li绑定点击事件
liObjs.forEach(function(v,k){
v.onclick=function(){
// console.log(k);
// 选中当前点击的，取消现在选中的
var ac = document.querySelector('.active');
ac.className ='';
v.className = 'active';
// 取出解释语，进行设置
var msg = arr[k];
h2Obj.innerHTML = k+1+'月活动';
pObj.innerHTML=msg;
}
})
for
问题 下面的代码使用for，点击事件执行时，i 已经变为12了
// 使用for的写法
for( var i=0;i<liObjs.length;i++){
//能够遍历获取到每一个li节点的值
console.log(liObjs[i]);
liObjs[i].onclick=function(){
//点击任意一个li标签，都会输出一次12
console.log(i);
}
}
解决办法1：给具体的某个li标签设置自定义属性,将下标保存到标签中
此方法为物理保存，可以很清楚的看到标签上的index属性
*注意：使用this.getAttribute('index')获取到的下标是String类型的，要使用this.getAttribute('index') - 0将其转化为Number型数据*
// 使用for的写法
for( var i=0;i<liObjs.length;i++){
console.log(liObjs[i]);
//解决办法1：物理保存，可以很清楚的看到标签上的index属性
//给具体的某个li标签设置自定义属性,将下标保存到标签中
liObjs[i].setAttribute('index',i)
liObjs[i].onclick=function(){
//此时i已经变为12
// console.log(i);
var index = this.getAttribute('index');
console.log(index);
}
}
解决办法2：给节点对象 动态 添加属性index，并将i的值赋给index
此方法将下标保存在js对象上
注意：此时要使用下标得使用this.index
// 使用for的写法
for( var i=0;i<liObjs.length;i++){
console.log(liObjs[i]);
//解决办法2：给节点对象动态添加属性index，并将i的值赋给index
liObjs[i].index=i;
liObjs[i].onclick=function(){
//此时i已经变为12
// console.log(i);
console.log(this.index);
var msg = arr[this.index];
h2Obj.innerHTML = this.index +1 +'月活动';
pObj.innerHTML = msg;
}
}
