visibility hidden, javascript?

Kann mir bitte jemand sagen, warum mein code funktioniert nicht richtig, kann nicht scheinen, um herauszufinden, warum, es ist eine wirklich einfache Sache und ich verstehe nicht, warum ich kann nicht finden das problem...

var pictures = document.getElementById('contents').getElementsByClassName('pictureSmall');
    for(k=0; k<pictures.length; k++){ 
        pictures[k].onclick = showPic;
        pictures[k].onblur = hidePic;
    }

function showPic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'visible';

}

function hidePic(){
        var showPicture = this.getElementsByClassName('pictureBig')[0];
        showPicture.style.visibility = 'hidden';

}

dies ist die html:

    <div id="contents">
            <div class="pictureBig"><img src="bilder/boards.jpg" alt="cruisers"/></div>
        <div id="main" class="content">

            <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice"/>
            <img src="bilder/miniboard2m.jpg" alt="minicruiser" id="boardgreen"/>
            <img class="pictureSmall" src="bilder/boardssmall.jpg" alt="minicruisers" id="boardsmall"/>
            <img class="pictureSmall" src="bilder/boardbluesmall.jpg" alt="shirt" id="small"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img class="pictureSmall" src="bilder/postersmall.jpg" alt="minicruiser" id="small2"/><div class="pictureBig"><img src="bilder/boards.jpg" alt="minicruisers"/></div>
            <img src="bilder/boardcarving.jpg" alt="print" id="boardprint"/>
            <p></p>
        </div>
</div>

- und dies ist der css:

.pictureBig {
    position:absolute; 
    display:none; 
    background-color:#EEE; 
    border:2px ridge #333; 
    padding:6px; 
    left:10px; 
    z-index:2; 
    margin-left:350px;
}

die Meldung bekomme ich wenn ich versuche die Anzeige des großen Bildes ist auf "Nicht-Lesen-Eigenschaft 'style' of undefined".

  • Konnte Sie mit chrome oder firefox-debugger? Mit Firefox können Sie installieren das Firebug-plugin. Drücken Sie F12, um die Konsole sehen, und es zeigt Ihnen die Zeile der Fehler aufgetreten ist. In Ihrem code können Sie benutzen die Konsole.melden Sie(etwas); um zu sehen ob die Variablen den erwarteten Wert.
  • es bedeutet, dass JavaScript ist nicht in der Lage, herauszufinden, was meinst du this.getElementsByClassName('pictureBig')[0];
  • Sie können versuchen, die jquery für das es so einfach zu implementieren
  • versuchen Sie, hinzufügen von Stil-Tags in der img <img src="bilder/miniboardm.jpg" alt="minicruiser" id="boardsprice" style="visibility:hidden"/>
InformationsquelleAutor spovell | 2013-06-05
Schreibe einen Kommentar