[DOM + JavaScript] Ophalen van divs met gelijkaardige namen.

Mijn bedoeling is het volgende. Ik heb één div met een navigatie (#menu) over enkele producten. Wanneer er een link wordt aangeklikt, moet in een andere div (#product) de productinformatie verschijnen. Elk product heeft een andere div (#product1, #product2,...) en deze staan allemaal onder mekaar, en zitten dus allemaal in de div #product. Dit heb ik gedaan omdat ik weet dat het met het DOM mogelijk is de onnodige div's te verbergen. Wanneer een link wordt aangeklikt verschijnt dus de bijhorende productdiv (bv. #product3). Per default moet het eerste product getoond worden (#product1).

Om geen verwarring te laten ontstaan, #product is een absoluut gepositioneerde container voor alle andere productdivs’s (#product1, #product2,…).

Wie kan me op weg helpen, want ik heb nog niet voldoende ervaring met het DOM. Ik vind dan ook geen goede referentiewebsite, weet iemand er wel één of meer?

ik neem aan dat elk product een aparte id heeft (product1, product2,...)

geef ze allemaal dezelfde naam mee (dus net zoals je schrijft id=‘product1’… schrijf je ook name=‘products’)

met document.getElementsByName(“products”); kun je ze allemaal selecteren

http://www.w3schools.com/js/js_intro.asp is een aanraden (als je hem nog niet kende)

Bedankt voor je mogelijke oplossing, maar ik werk in XHTML 1.0 Strict. Name bestaat hierin niet meer als attribuut. Een mogelijkheid zou kunnen zijn een class "product" toe te voegen, dat zou wel kloppen. Elke div zou dan uniek zijn door zijn id, maar toch behoren tot een class. Dan zou een functie GetElementByClass kunnen gebruikt worden, maar deze bestaat (nog) niet in het DOM als ik mij niet vergis. Maar elke product div (bv. product1, product2,...) bevindt zich wel in één containerdiv product, zou het mogelijk zijn om alle divs in één div te kunnen selecteren?

Je kunt met "getElementsByTagName('div')" de div's uit #product ophalen en dan vervolgens door de atrributten "loopen' en checken of het attribuut id gelijk is aan "product-n"

[code:1:b3b2be95fc]function setProductdiv(divname){
var element = document.getElementById(‘product’);
var elements = element.getElementsByTagName(‘div’);
for(var i = 0; i < elements.length; i++){
var node = elements.item(i);
for(var j = 0; j < node.attributes.length; j++) {
if(node.attributes.item(j).nodeName == ‘id’) {
if(node.attributes.item(j).nodeValue == divname) {
// activering;
}
}
}
}
}[/code:1:b3b2be95fc]

maar misschien is het wel simpeler en heb je altijd bijvoorbeeld 10 producten dan kun je eenvoudig een for loop gebruiken

[code:1:b3b2be95fc]for (i=1; i<11; i++) {
document.getElementById(‘product’ + i]).style.display = ‘none’;
}[/code:1:b3b2be95fc]

het is wel slim om eerst te testen of de browser “getElementById” wel ondersteund!