javascript onclick, anonymous function
我是一个初级的javascript程序员。我正在尝试创建类似于lightbox 2的东西,但要简单得多。我想自己白手起家的唯一原因是为了学习。然而,我一直停留在最后一个关键的部分,它显示图像。我认为问题在于我试图使用onclick来分配匿名函数:elem[i].onclick=function()litebox focus(imgsource,imgtitle);return false;. 如果你运行我的代码并尝试点击谷歌的标志,它会显示雅虎的标志和标题,而不是谷歌的标志和标题。但是,当你点击雅虎的标志时,它会很好地工作,所以匿名函数似乎只适用于最后一个循环。事先谢谢!!!!
为了您的方便,我将整个CSS/JS/XHTML放在一个页面中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | <html> <head> Erik's Script <style type="text/css"> #liteBoxBg, #liteBox { display: none; } #liteBoxBg { background-color: #000000; height: 100%; width:100%; margin:0px; position: fixed; left:0px; top: 0px; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; z-index: 40; } #liteBox { background-color:#fff; padding: 10px; position:absolute; top:10%; border: 1px solid #ccc; width:auto; text-align:center; z-index: 50; } </style> <script type="text/javascript"> window.onload = start; function start(){ var imgTitle ="No title"; var imgSource; var elem = document.getElementsByTagName("a"); var i; //Dynamically insert the DIV's to produce effect var newDiv = document.createElement('div'); newDiv.setAttribute("id","liteBox"); document.getElementsByTagName("body")[0].appendChild(newDiv); newDiv = document.createElement('div'); newDiv.setAttribute("id","liteBoxBg"); document.getElementsByTagName("body")[0].appendChild(newDiv); //Check those anchors with rel=litebox for(i = 0;i < elem.length;i++){ if(elem[i].rel =="litebox"){ imgSource = elem[i].href.toString(); imgTitle = elem[i].title; elem[i].childNodes[0].style.border="0px solid #fff"; elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle); return false;}; } } //When foreground is clicked, close lite box document.getElementById("liteBoxBg").onclick = liteBoxClose; } //Brings up the image with focus function liteBoxFocus(source,title){ document.getElementById("liteBox").style.display ="block"; document.getElementById("liteBox").innerHTML ="" + title +"" + "<img src='" + source +"'/><br />" + "<img src='images/litebox_close.gif' border='0' alt='close'/>"; document.getElementById("liteBoxBg").style.display ="block"; } //closes lite box function liteBoxClose(){ document.getElementById("liteBox").style.display ="none"; document.getElementById("liteBoxBg").style.display ="none"; return false; } </head> <body> <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /> <a href=" http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" rel="litebox" title="Yahooo Logo"><img src=" http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /> </body> </html> |
事件处理程序形成一个闭包,它记住一个指向封闭范围中变量的"活动"指针。因此,在实际执行时,它们具有
相反,您可以使用此模式来本地化变量值。每次调用getclickhandler时,它都会在getclickhandler中创建源代码和标题的副本。因此,返回的函数会记住循环迭代中的值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //Check those anchors with rel=litebox for(i = 0;i < elem.length;i++){ if(elem[i].rel =="litebox"){ imgSource = elem[i].href.toString(); imgTitle = elem[i].title; elem[i].childNodes[0].style.border="0px solid #fff"; elem[i].onclick = getClickHandler(imgSource, imgTitle); } } //Brings up the image with focus function getClickHandler(source,title){ return function() { document.getElementById("liteBox").style.display ="block"; document.getElementById("liteBox").innerHTML ="" + title +"" + "<img src='" + source +"'/><br />" + "<img src='images/litebox_close.gif' border='0' alt='close'/>"; document.getElementById("liteBoxBg").style.display ="block"; } } |