javascript onclick,匿名函数
Posted
技术标签:
【中文标题】javascript onclick,匿名函数【英文标题】:javascript onclick, anonymous function 【发布时间】:2010-11-06 21:24:40 【问题描述】:我是一名初级 javascript 程序员。我正在尝试创建类似于 Lightbox 2 的东西,但要简单得多。我想自己从头开始做这件事的唯一原因是我可以学习。但是,我一直停留在显示图像的最后一个关键部分。我相信问题在于我尝试使用 onclick 并分配给匿名函数:elem[i].onclick = function ()liteBoxFocus(imgSource,imgTitle);返回假;; 。如果您运行我的代码并尝试单击 google 徽标,它将显示 yahoo 徽标和标题,而不是 google 的徽标和标题。但是,当您单击雅虎徽标时,它可以正常工作,因此匿名函数似乎仅适用于最后一个循环。提前谢谢!!!
为了您的方便,我已将整个 CSS/JS/Xhtml 放在一个页面中。
您的事件处理程序形成一个闭包,该闭包记住一个“活动”指针,该指针指向封闭范围内的变量。所以当它们实际执行时,它们具有最后一个值imgSource
和imgTitle
。
相反,您可以使用此模式来本地化变量值。这将在每次调用 getClickHandler 时创建源和标题的副本。因此,返回的函数会记住循环迭代中的值。
//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 = "<h1>" + title + "</h1>" +
"<img src='" + source + "'/><br />" +
"<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
document.getElementById("liteBoxBg").style.display = "block";
【讨论】:
以上是关于javascript onclick,匿名函数的主要内容,如果未能解决你的问题,请参考以下文章
匿名函数如何在 React 组件中的 onClick 中工作?