javascript onclick, chức năng ẩn danh

Tôi là một lập trình viên javascript bắt đầu. Tôi đang cố gắng tạo ra một cái gì đó tương tự như Lightbox 2, nhưng đơn giản hơn nhiều. Lý do duy nhất tại sao tôi muốn làm điều đó từ đầu của riêng tôi là để tôi có thể học hỏi. Tuy nhiên, tôi đã bị mắc kẹt ở phần quan trọng cuối cùng, nơi nó hiển thị hình ảnh. Tôi tin rằng vấn đề nằm ở nơi tôi cố gắng sử dụng onclick với gán cho một hàm ẩn danh: elem [i] .onclick = function() {liteBoxFocus (imgSource, imgTitle); return false;}; . Nếu bạn chạy mã của tôi và thử nhấp vào biểu tượng google, nó sẽ mang logo yahoo và tiêu đề thay vì logo và tiêu đề của google. Tuy nhiên khi bạn nhấp vào biểu tượng yahoo nó hoạt động tốt để có vẻ như là chức năng nặc danh chỉ giữ cho vòng lặp cuối cùng. Cảm ơn trước!!!javascript onclick, chức năng ẩn danh

Tôi đã đặt toàn bộ CSS/JS/XHTML vào một trang để thuận tiện cho bạn.

 
<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 focus 
function 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 box 
function 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>

Nguồn

2009-06-30 Erik

Trình xử lý sự kiện của bạn tạo thành một đóng để nhớ con trỏ "sống" đến các biến trong phạm vi kèm theo. Vì vậy, khi chúng thực sự được thực thi, chúng có giá trị cuối cùng là imgSource và imgTitle.

Thay vào đó, bạn có thể sử dụng mẫu này để bản địa hóa các giá trị biến. Điều này sẽ tạo bản sao của nguồn và tiêu đề bên trong getClickHandler mỗi khi nó được gọi. Hàm trả về do đó ghi nhớ các giá trị trong vòng lặp đó của vòng lặp.

//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"; 
    } 
}

Nguồn

2009-06-30 04:07:34

+1 đánh bại tôi với nó –

javascript onclick, chức năng ẩn danh

Trả lời

Các vấn đề liên quan