Keskustelu: Nettisivujen teko: JS: DOM style monessa elementissä

Moi ongelmana on, että kun asetan javascriptillä elementteihin (saman nimiset) stylen (kyseessä display: none ja block -> hide ja show), niin se tulee vaan siihen ensimmäiseen.

Tässä koodini yksinkertaisessa muodossa.

JS:

function hideshow(mode) {
if (mode == "show") {
document.getElementById('divbox').style.display = "block";
} else {
document.getElementById('divbox').style.display = "none";
}
}

HTML:

<div id="divbox">Moi!</div><!-- Vain tämä muuttaa tilaa -->
<div id="divbox">Heippa!</div>
<div id="divbox">No terppa!</div>
<div id="divbox">Terveppä terve!</div>
<div id="divbox">Hello!</div>
<div id="divbox">Bonjour!</div>
<div id="divbox">Hi!</div>

Eli vain toi ensimmäinen muuttaa tilaa. Miten voisin tehdä, että noi kaikki laatikot menee? Oikeasti laatikot tulostuvat tietokannasta PHP:llä, joten erillinen nimeäminen (esim. "divbox7") ei kuullosta kivalta.

ID eli identiteetti ei kuulu olla samanniminen eri tageissa.

Jos haluat tehdä kyseisellä tavalla, tee divbox-luokka, ja siihen otat displayn jqueryllä.

No ihan ensimmäisenä kannattaa huomata että id on uniikki, eli toi sun html on jo sellaisenaan virheellistä kun siinä on sama id seitsemän kertaa.

Ehkäpä class olisi tuohon käyttötapaukseen järkevämpi.. eli class="divbox"

Peran näköjään ehtikin ensin.

Sitten document.getElementsByClassName('divbox') hakee kaikki oikeanlaiset elementit ja voit asentaa tyylit loopissa. Tai käyttää jQueryä kuten peran ehdotti.

Myös tyylin asettamisen sijaan voisi olla parempi lisätä ja poistaa luokka ja määrittää tyylit CSS:llä. Silloin ei olisi vaaraa, että JS:llä ”palauttaisit” elementille tyylin, joka olisikin erilainen kuin sen alkuperäinen tyyli. Tämä myös selventäisi koodia ihan samalla tavalla kuin sekin, että HTML:ssä vältetään style-attribuuttien käyttöä.

Ehkä helpottaisi myös käyttää jQueryä:

divbox-class näkyviin:

$('.divbox').show();