javascript函数中,for循环遍历dom节点,监听点击事件,输出都是一样的解决办法。

我在写一个dom,需要click的监听事件,但是我在for循环后那个obj[i]都是第二个节点,点击事件属于异步加载过程,

在click事件还没触发的时候,for循环已经加载完毕,这时候i值已经是最后一个加1了,即我获取的那个节点就是这个for循环的最后一个节点的下一个节点,需要用到闭包。需求:其中pack-up节点有多个。需要通过点击pack-up节点,然后再让pack-up节点的父节点的下一个兄弟节点和下个兄弟节点的下一个兄弟节点隐藏和展示的效果。

var obj = document.getElementsByClassName("pack-up");
for(var i=0;i<obj.length;i++){
    //console.log(obj[i]);
    console.log(obj[i])
    var hide = true;  //隐藏
    (function(i){
        obj[i].addEventListener("click",function (){
            //获取兄弟节点
            var n1 = obj[i].parentNode;
            var n2 = n1.nextElementSibling;
            var n3 = n2.nextElementSibling;
            if(hide){
                n2.style.display = "block";
                console.log(n2);
                n3.style.display = "block";
                obj[i].innerHTML = "收起";
                var img = document.createElement("img");
                img.src =  "images/arrow-r.png";
                obj[i].appendChild(img);
                console.log(n3);
                hide = false;
            }else{
                n2.style.display = "none";
                n3.style.display = "none";
                obj[i].innerHTML = "展开";
                var img = document.createElement("img");
                img.src =  "images/arrow-bottom.png";
                obj[i].appendChild(img);
                hide = true;
            }
        },false);
   })(i);
}

猜你喜欢

转载自blog.csdn.net/DiegoBrother/article/details/86605905