0

我正在尝试创建一个灯箱，但遇到了麻烦。

我认为问题要么是因为我有 2 个 window.onloads，要么是因为我试图引用一个新创建的 DOM 元素。我在下面的代码中添加了一些注释来解释我正在尝试做什么。

//open lightbox
window.onload = showLargeImage;

function showLargeImage() {
    var enlargeButton = document.getElementById("thumb1"); // thumb1 is a thumbnail you click to get the lightbox
    enlargeButton.onclick = handleClick;
}

function handleClick() {
    var lightboxContainerId = document.getElementById("lightboxContainer");
    lightboxContainerId.innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';
} // the inner HTML creates the lightbox.

//close lightbox
window.onload = reduceImage; // i'm pretty sure that this windo.onload is the problem... or, that I'm referencing "imageButton" which is new to the DOM             

function reduceImage() {
    var reduceButton = document.getElementById("imageButton"); // you're supposed to click the big image in the lightbox to get close it.  
    reduceButton.onclick = handleReduceClick;
}

function handleReduceClick() {
    var shadeId = document.getElementById("lightboxContainer");
    shadeId.innerHTML = "say what"; // closing the lightbox simply strips everything out of the lightboxContainer                
    alert("oh yeah");
}
4

2 回答 2

1

以下是您的代码无法正常工作的几个原因：

  • showLargeImage 和 reduceImage 在分配给 window.onload 的位置缺少调用括号。没有括号，window.onload 被分配了一个函数，但该函数没有被调用。例如，您应该有 window.onload = showLargeImage();
  • 正如您所怀疑的，第二个 window.onload 正在覆盖第一个。
  • reduceButton （正如您所怀疑的）在它存在之前被分配，导致错误。

这是一种可能适合您的解决方案。

HTML：

<!DOCTYPE html>
<html><head><title></title>
</head><body>

    <a href="#" id="thumb">View</a>
    <div id="lightboxcontainer"></div>

</body></html>

JavaScript：

window.onload = function() {

    // click link to show
    var enlargeButton = document.getElementById('thumb');
    enlargeButton.onclick = function() {
        var lightboxContainerId = document.getElementById('lightboxcontainer');
        lightboxContainerId.innerHTML = '<img src="http://placehold.it/350x150"' +
                                        'width="350" height="150 alt="Thumb 1">' +
                                        '<p>Click image to hide.</p>';
    };

    // click image to hide
    var reduceButton = document.getElementById('lightboxcontainer');
    reduceButton.onclick = function() {
        reduceButton.innerHTML = ''; // removes lightbox contents         
    };
};

现场演示：http: //jsfiddle.net/ericmathison/BxwYY/7/

于 2012-04-07T13:47:07.210 回答
0

如果代码位于<body>（或灯箱元素之后的任何位置）的末尾，只需使用以下代码：

document.getElementById("thumb1").onclick = function () {
    document.getElementById("lightboxContainer").innerHTML = '<div class="lightbox"><a class="reduceButton" href="#" ><img id="imageButton" class="largeImage" src="2012/images/web/web1.jpg" width="500" height="500" alt="Web Thumb 1"></a></div>';  
    document.getElementById("imageButton").onclick = function () {
        document.getElementById("lightboxContainer").innerHTML = "say what";
        alert("oh yeah");
    };
}

这将做你想做的一切。

于 2012-04-06T22:55:41.477 回答