6

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

为了您的方便，我将整个 CSS/JS/XHTML 放在了一个页面中。

<html>
<头部>
<title>埃里克的剧本</title>

<style type="text/css">
#liteBoxBg，#liteBox {
    显示：无；
}

#liteBoxBg {
    背景颜色：#000000；
    高度：100%；
    宽度：100%；
    边距：0px；
    位置：固定；
    左：0px；
    顶部：0px；
    过滤器：alpha（不透明度=80）；
    -moz-不透明度：0.8；
    -khtml-不透明度：0.8；
    不透明度：0.8；
    z 指数：40；
}

#liteBox {
    背景颜色：#fff;
    填充：10px；
    位置：绝对；
    前10名％;
    边框：1px 实心#ccc；
    宽度：自动；
    文本对齐：居中；
    z 指数：50；
}
</style>

<script type="text/javascript">

window.onload = 开始；

函数开始（）{

    var imgTitle = "无标题";
    var imgSource;
    var elem = document.getElementsByTagName("a");
    变量我;

    //动态插入DIV产生效果
    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);

    //用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); 返回假;};
        }
    }

    //点击前景时，关闭lite box
    document.getElementById("liteBoxBg").onclick = liteBoxClose;
}

//调出有焦点的图像
功能 liteBoxFocus（来源，标题）{
    document.getElementById("liteBox").style.display = "block";
    document.getElementById("liteBox").innerHTML = "<h1>" + 标题 + "</h1>" +
                                                   "<img src='" + 源代码 + "'/><br />" +
                                                   "<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif'border='0' alt='close'/></a>";
    document.getElementById("liteBoxBg").style.display = "block";
}

//关闭精简版框
功能 liteBoxClose(){
    document.getElementById("liteBox").style.display = "none";
    document.getElementById("liteBoxBg").style.display = "none";
    返回假；
}

</脚本>



</head>

<正文>

<a href="http://www.google.com/intl/en_ALL/images/logo.gif" rel="litebox" title="Google 徽标"><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="雅虎标志"><img src="
http://www.barbariangroup.com/assets/users/bruce/images/0000/4121/yahoo_logo.jpg" alt="" /></a>



</正文>
</html>
4

1 回答 1

10

您的事件处理程序形成一个闭包，该闭包记住指向封闭范围内变量的“活动”指针。因此，当它们实际执行时，它们具有最后一个值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";
    }
}
于 2009-06-30T04:07:34.390 回答