gpt4 book ai didi

javascript onclick,匿名函数

转载 作者:数据小太阳 更新时间:2023-10-29 05:56:30 28 4
gpt4 key购买 nike

我是一名初级 JavaScript 程序员。我正在尝试创建类似于 Lightbox 2 的东西,但要简单得多。我想自己从头开始做的唯一原因是我可以学习。但是,我一直停留在显示图像的最后一个关键部分。我相信问题出在我尝试使用 onclick 并分配给匿名函数的地方:elem[i].onclick = function (){liteBoxFocus(imgSource,imgTitle);返回假;}; 。如果您运行我的代码并尝试单击谷歌 Logo ,它会显示雅虎 Logo 和标题,而不是谷歌的 Logo 和标题。但是,当您单击雅虎 Logo 时,它工作正常,因此匿名函数似乎只适用于最后一个循环。提前致谢!!!

为了方便起见,我已将整个 CSS/JS/XHTML 放在一个页面中。

<html><head><title>Erik's Script</title><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 focusfunction liteBoxFocus(source,title){    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";}//closes lite boxfunction liteBoxClose(){    document.getElementById("liteBox").style.display = "none";    document.getElementById("liteBoxBg").style.display = "none";    return false;}</script></head><body><a href="http://www.google.com/intl/en_ALL/images/logo.gif" rel="litebox" title="Google Logo"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /></a><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="" /></a></body></html>

最佳答案

您的事件处理程序形成一个闭包,它会记住指向封闭范围内变量的“实时”指针。因此,当它们实际执行时,它们具有 imgSourceimgTitle 的最后一个值。

相反,您可以使用此模式来本地化变量值。这将在每次调用时在 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,匿名函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1061622/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com