javascript onclick, anonim işlev

Başlangıcı javascript programcısıyım. Lightbox 2'ye benzer bir şey yaratmaya çalışıyorum ama çok daha basit. Bunu tek başıma sıfırdan yapmak istediğim tek şey, böylece öğrenebileceğim. Ancak, görüntüyü görüntülediği son kritik kısımda sıkıştım. Sorunun, anonim bir işleve atama ile onclick kullanmaya çalıştığım yer olduğuna inanıyorum: elem [i] .onclick = function() {liteBoxFocus (imgSource, imgTitle); false;}; . Kodumu çalıştırırsanız ve google logosunu tıklamayı denerseniz, google'un logosu ve başlığı yerine yahoo logosunu ve başlığını getirecektir. Ancak yahoo logosuna tıkladığınızda, iyi çalışır, bu yüzden anonim işlev sadece son döngüde kalır. Şimdiden teşekkürler!!!javascript onclick, anonim işlev

Size kolaylık sağlamak için CSS/JS/XHTML'in tamamını bir sayfaya yerleştirdim.

 
<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>

kaynak

2009-06-30 Erik

Olay işleyicileriniz, kapsayıcı kapsamdaki değişkenlere "canlı" gösterici olduğunu hatırlayan bir kapatma oluşturur. Yani gerçekten idam edildiğinde, son değeri imgSource ve imgTitle vardı.

Bunun yerine, değişken değerlerini yerelleştirmek için bu deseni kullanabilirsiniz. Bu, her çağrıldığında getClickHandler içindeki kaynak ve başlığın kopyalarını oluşturacaktır. Döndürülen işlev bu nedenle döngünün yinelemesindeki değerleri hatırlar.

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

kaynak

2009-06-30 04:07:34

+1 onu bana dövdü –

javascript onclick, anonim işlev

cevap

İlgili konular