جافا سكريبت onclick, وظيفة مجهول

StackOverflow https://stackoverflow.com/questions/1061622

سؤال

أنا بداية جافا سكريبت مبرمج.أنا في محاولة لخلق شيء مماثل العلبة الخفيفة 2, ولكن أبسط من ذلك بكثير.السبب الوحيد الذي أريد القيام به من الصفر على بلدي حتى أستطيع أن تعلم.ومع ذلك, لقد كان عالقة في آخر جزء هام حيث يعرض الصورة.أعتقد أن المشكلة تكمن أين أنا أحاول أن استخدام onclick مع الإحالة إلى مجهول الوظيفة:إيليم[أنا].onclick = وظيفة (){liteBoxFocus(imgSource,imgTitle);return false;};.إذا قمت بتشغيل التعليمات البرمجية لي و حاول النقر على شعار جوجل انها سوف تجلب ما يصل ياهو الشعار و العنوان بدلا من شعار جوجل و العنوان.ولكن عند النقر على ياهو شعار أنه يعمل بشكل جيد لذلك يبدو أن وظيفة مجهول يحمل فقط عن الحلقة الأخيرة.شكرا مقدما!!!

لقد وضعت كامل 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 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>
هل كانت مفيدة؟

المحلول

الحدث الخاص بك معالجات تشكيل الإغلاق التي تذكر "العيش" مؤشر إلى المتغيرات في أرفق نطاق.حتى عندما يتم تنفيذ في الواقع لديهم القيمة الأخيرة 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";
    }
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top