javascript onclick,匿名函数

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>

事件处理程序形成一个闭包,它记住一个指向封闭范围中变量的"活动"指针。因此,在实际执行时,它们具有imgSourceimgTitle的最后一个值。

相反,您可以使用此模式来本地化变量值。每次调用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";
    }
}