document.getElementById vraag
Beste,
Ik ben bezig met een stukje javascript.
Wat het probleem nu is is dat ik meerdere "current" op mijn pagina heb staan en dat ik graag bij dit stukje code een scheiding van de verschillende "current"'s wil maken. Ik weet dat je dit in jquery doet met de voorgaande id.
bijv. .navigatie li a#current
Hoe is dit ook mogelijk bij bovenstaande stukje code?
Alvast bedankt.
Ik ben bezig met een stukje javascript.
Wat het probleem nu is is dat ik meerdere "current" op mijn pagina heb staan en dat ik graag bij dit stukje code een scheiding van de verschillende "current"'s wil maken. Ik weet dat je dit in jquery doet met de voorgaande id.
bijv. .navigatie li a#current
Hoe is dit ook mogelijk bij bovenstaande stukje code?
Alvast bedankt.
Met de tagName eigenschap van het element.
@Ger van Steenderen, Hoe zou dat dan eruit moeten komen te zien. Ben namelijk niet super bekend met die tag?
Als je een child situatie wilt doen kun je het zo doen:
Currents bevat nu alle elementen met de class current die in #box zitten.
Als je a#current wilt doen kun je dit gebruiken:
Nu bevat currents alle anchor elementen met de class current.
Let op de s achter Element bij de byTagName en byClassName functies.
Voor uitleg over de gebruikte functies:
- Array.push()
- De for-loop trick die ik hier gebruik (in het eerste hoofdstuk 'Looping' gaat het hierover
- document.getElementsByTagName()
- document.getElementsByClassName()
Currents bevat nu alle elementen met de class current die in #box zitten.
Als je a#current wilt doen kun je dit gebruiken:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
var anchors = document.getElementsByTagName('a'),
currents = [];
for( i=-1; anchor = anchors[++i]; ) {
if( anchor.className.match(/current/) ) {
// Als er ergens in de class current staat
currents.push(anchor);
}
}
currents = [];
for( i=-1; anchor = anchors[++i]; ) {
if( anchor.className.match(/current/) ) {
// Als er ergens in de class current staat
currents.push(anchor);
}
}
Nu bevat currents alle anchor elementen met de class current.
Let op de s achter Element bij de byTagName en byClassName functies.
Voor uitleg over de gebruikte functies:
- Array.push()
- De for-loop trick die ik hier gebruik (in het eerste hoofdstuk 'Looping' gaat het hierover
- document.getElementsByTagName()
- document.getElementsByClassName()
Het is me tot op heden nog niet gelukt. Het gaat voor de makkelijkheid om de volgende code:
En voor de mensen die het net lezen, er moet een onderscheid worden gemaakt dat deze active van de div ul categorie komt...
En voor de mensen die het net lezen, er moet een onderscheid worden gemaakt dat deze active van de div ul categorie komt...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';
}
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById(new_tab).className = 'active';
}
Ik zie mijn code nergens terug? Heb je dat van mij geprobeerd toe te passen? Even in stappen, dan kun je het doormiddel van de links en code die ik heb gegeven wel zelf oplossen:
1.1) Eerst selecteren we alle div elementen met document.getElementsByTagName
1.2) Met een for loop lopen we door elk van deze div elementen
2.1) We selecteren met getElementsByTagName alle ul elementen in div (document wordt dan vervangen door het div element)
2.2) We lopen door elk van deze ul elementen
3) We halen alle elementen met de class active op uit elke ul waar we doorheen lopen met getElementsByClassName.
1.1) Eerst selecteren we alle div elementen met document.getElementsByTagName
1.2) Met een for loop lopen we door elk van deze div elementen
2.1) We selecteren met getElementsByTagName alle ul elementen in div (document wordt dan vervangen door het div element)
2.2) We lopen door elk van deze ul elementen
3) We halen alle elementen met de class active op uit elke ul waar we doorheen lopen met getElementsByClassName.
1.1) Eerst selecteren we alle div elementen met document.getElementsByTagName
Moet ik dan gewoon dezelfde regels gebruiken als de rest of?
Toevoeging op 12/12/2011 19:23:29:
Beste Wouter J, Ik heb je raad opgevolgd. Alleen hoe kan ik dan die currents oproepen?
Mijn code ziet er nu als volgt uit:
Moet ik dan gewoon dezelfde regels gebruiken als de rest of?
Toevoeging op 12/12/2011 19:23:29:
Beste Wouter J, Ik heb je raad opgevolgd. Alleen hoe kan ik dan die currents oproepen?
Mijn code ziet er nu als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// JavaScript Document
function tabSwitch(new_tab, new_content) {
var actives = document.getElementById('category').getElementsByClassName('active');
document.getElementById('photography').style.display = 'none';
document.getElementById('other').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('photography').className = '';
document.getElementById('other').className = '';
document.getElementById(new_tab).className = 'active';
}
function tabSwitch(new_tab, new_content) {
var actives = document.getElementById('category').getElementsByClassName('active');
document.getElementById('photography').style.display = 'none';
document.getElementById('other').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('photography').className = '';
document.getElementById('other').className = '';
document.getElementById(new_tab).className = 'active';
}
Het is gelukt. Ik was vergeten aan de categorieen id's mee te geven, zodat js kan checken of alles met elkaar klopte. Bedankt voor jullie medewerking!




