[JS] alle objecten binnen div aanspreken

[plakbandrol]

Ik zit met het volgende probleem waar ik niks over heb kunnen vinden in google

de volgende structuur gebruik ik voor een menu

code:

<div id="menu">
     <div id="item1">klik hier</div>
     <div id="item2">klik hier</div>
     <div id="item3">klik hier</div>
</div>

nou wil ik item2 geel maken wanneer er op wordt geklikt, dus ongeveer op deze manier

code:

<div id="menu">
     <div id="item1" onclick="this.bgcolor='#FFED21'>klik hier</div>
(enz..)

Alleen nu moeten bij de overige items de gele kleur weer worden weggehaald, hoe doe ik dit?

Tot nu toe zette ik via een javascript loopje alle items weer op de oude kleur, en als laatste zette ik het aangeklikte item op geel, maar dit is nogal omslachtig, bovendien heten de items niet altijd item1 t/m item10 maar hebben ze willekeurige nummers, dan is het helemaal lastig. En als er bijvoorbeeld >100 items zijn, is dit best een trage oplossing.

Wat ik zoek is een mogelijkheid om met javascript automatisch alle objecten binnen een div aan te spreken, zodat ik met 1 opdracht alle items een andere achtergrondkleur kan geven.. is zoiets mogelijk?

[Padschild]

Je kunt alle childnodes van een object op deze manier opvragen:

JavaScript:

var Items = document.getElementById("menu").childNodes;

Items is dan een array, waar je de length van kan bepalen en gewoon doorheen kan loopen Dan maakt de naam iig niks meer uit.

[ Voor 7% gewijzigd door Padschild op 13-09-2007 11:41 ]

[crisp]

Als je nu gewoon bijhoudt wat het active item is, dan heb je geen loopjes nodig:

HTML:

<script type="text/javascript">
var activeItem = null;
function makeActive(el)
{
  if (activeItem)
    activeItem.style.backgroundColor = '';

  activeItem = el;
  activeItem.style.backgroundColor = '#ffed21';
}
</script>
<div id="menu">
     <div onclick="makeActive(this)">klik hier</div>
     <div onclick="makeActive(this)">klik hier</div>
     <div onclick="makeActive(this)">klik hier</div>
</div>

[plakbandrol]

Padschild schreef op donderdag 13 september 2007 @ 11:38:
Je kunt alle childnodes van een object op deze manier opvragen:

JavaScript:

var Items = document.getElementById("menu").childNodes;

Items is dan een array, waar je de length van kan bepalen en gewoon doorheen kan loopen Dan maakt de naam iig niks meer uit.

kijk, zoiets zocht ik.. even uittesten

[Padschild]

Toch kun je beter met Crisp zijn idee verder gaan, wilde je net nog een voorbeeld daarvan gaan geven, maar Crisp tiept toch nog even wat sneller als ik (great minds think alike ) Of ik had gewoon mijn post meteen helemaal uit moeten denken...

Als je echt honderden items gaat gebruiken, zou ik dat in ieder geval zeker doen

[ Voor 4% gewijzigd door Padschild op 13-09-2007 11:46 ]

[plakbandrol]

crisp schreef op donderdag 13 september 2007 @ 11:40:
Als je nu gewoon bijhoudt wat het active item is, dan heb je geen loopjes nodig:

HTML:

<script type="text/javascript">
var activeItem = null;
function makeActive(el)
{
  if (activeItem)
    activeItem.style.backgroundColor = '';

  activeItem = el;
  activeItem.style.backgroundColor = '#ffed21';
}
</script>
<div id="menu">
     <div onclick="makeActive(this)">klik hier</div>
     <div onclick="makeActive(this)">klik hier</div>
     <div onclick="makeActive(this)">klik hier</div>
</div>

Ah thanks crisp, dat is ook een mogelijkheid. Ik kan weer even verder klooien.

[plakbandrol]

Padschild schreef op donderdag 13 september 2007 @ 11:45:
Toch kun je beter met Crisp zijn idee verder gaan, wilde je net nog een voorbeeld daarvan gaan geven, maar Crisp tiept toch nog even wat sneller als ik Of ik had gewoon mijn post meteen helemaal uit moeten denken...

Als je echt honderden items gaat gebruiken, zou ik dat in ieder geval zeker doen

Ja klopt, maar bij complexere scripts is die childnodes wel erg makkelijk.