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(); が必要です。
  • ご想像のとおり、2 番目の window.onload が最初の window.onload を上書きしています。
  • reduceButton は (ご想像のとおり) 存在する前に割り当てられているため、エラーが発生します。

これがあなたのために働くかもしれない1つの解決策です。

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 に答える