onclick 获取点击之后的img 的id_JavaScript连载33点击查看大图效果以及闭包初步

一、点击图片显示大图代码

html>


    
    D33_1_SwitchIcon
    


    


    




二、如果使用闭包也可达到上面的效果

        window.onload = function (ev6) {
            //1.获取需要的标签
            var box = document.getElementById("box");
            var allList = box.getElementsByTagName("li");

            //2.监听鼠标进入li标签
            for(var i=0;i                //2.1取出单独的li标签
                var sLi = allList[i];
                // sLi.setAttribute("index",i+1);//复习设置属性的方法setAttribute
                // sLi.onmouseover = function (ev7) {
                //     console.log(this);
                //     console.log(this.getAttribute("index"));//获取这个li的index值
                // }
                //上面五行等价去下面,使用了闭包的知识，下次连载我们再讲
                (function (tag) {
                    sLi.onmouseover = function (ev9) {//复习onmouseover就是鼠标滑过这个模块之后要干的活儿
                        console.log(tag);
                        box.style.background =  'url("img/img_0'+ tag + '.png") no-repeat';
                    }
                })(i+1)
            }
        }

三、源码：

• D33_1_SwitchIcon.html
• D32_2_CommonMouse.html
• D32_3_erweimaXianshi.html
• 地址:https://github.com/ruigege66/JavaScript/blob/master/D33_1_SwitchIcon.html
• https://github.com/ruigege66/JavaScript/blob/master/D32_2_CommonMouse.html
• https://github.com/ruigege66/JavaScript/blob/master/D32_3_erweimaXianshi.html
• 博客园：https://www.cnblogs.com/ruigege0000/
• CSDN：https://blog.csdn.net/weixin_44630050?t=1
• 欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流