Class veranderen
Ik heb een aantal buttons op mijn site genummerd met id: id="button1",id="button2"
Deze buttons hebben standaard de class="button".
Nu wil ik eigenlijk dat als ik op een button klik, hij met javascript de class veranderd naar class="activebutton" en bij alle andere buttons de class weer terugzet naar class="button"
Nu heb ik een begin gemaakt, maar het doet helaas niet helemaal wat ik hoopte.
Mijn button ziet er als volgt uit:
<li><div id="button1" class="button"><a href="#" onclick="javascript:changeClass('button1')">Knop 1</a></div></li>
Dit is tot dusver mijn javascriptje:
Code (php)
1
2
3
4
2
3
4
function changeClass(elementID){
var element = document.getElementById(elementID);
element.className="activebutton";
}
var element = document.getElementById(elementID);
element.className="activebutton";
}
Wie kan mij hier mee verder helpen?
Alvast bedankt!
Gewijzigd op 14/01/2013 20:52:00 door D B
Met jQuery is dit wel makkelijker.
1) gooi alles op 'gewoon'
2) addClass aan het geklikte element.
Maar ik heb dus meerdere van deze buttons.
Als ik nu op button1 klik word daar de class bijgezet, maar als ik op button2 klik wil ik dat button1 weer teruggezet word. Hoe doe ik dit nu het makkelijkst?
Iets als foreach button class="button" en daarna voor de ene class="activebutton"
Begrijpen jullie het een beetje? :)
Eddy E op 14/01/2013 21:34:15:
1) gooi alles op 'gewoon'
Code (php)
1
2
3
4
5
2
3
4
5
var elems = document.querySelectorAll('.button');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
Gewijzigd op 14/01/2013 21:48:29 door Wouter J
Als eerste, bedankt voor de reactie!
Nu weet ik niet of ik jquery nodig heb voor dat scriptje wat jij geeft (denk het niet)
In principe is het denk ik voldoende als hij bovenaan alleen zoekt naar document.querySelectorAll('activebutton') of werkt dat zo niet?
Ik heb nu dit:(heb er af en toe wat commentaar achter staan)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function changeClass(elementID){
var elems = document.querySelectorAll('.button'); //kan ik hier niet gewoon activebutton zetten?
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elemsa = document.querySelectorAll('.buttona');// en hier activebuttona
[].forEach.call(elemsa, function (elema) {
elema.classList.remove('activebutton');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton"; //word dit dan element.classList.Add?
}
if(element.className=="buttona"){
element.className="activebuttona";
}
}
var elems = document.querySelectorAll('.button'); //kan ik hier niet gewoon activebutton zetten?
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elemsa = document.querySelectorAll('.buttona');// en hier activebuttona
[].forEach.call(elemsa, function (elema) {
elema.classList.remove('activebutton');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton"; //word dit dan element.classList.Add?
}
if(element.className=="buttona"){
element.className="activebuttona";
}
}
Het onderste gedeelte van de code werkt alleen als ik element.className laat staan.
Maar ook dan werkt het bovenste gedeelte niet helaas.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function changeClass(elementID){
var elems = document.querySelectorAll('activebutton');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elems = document.querySelectorAll('activebuttona');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebuttona');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.classList.add="activebutton";
}
if(element.className=="buttona"){
element.classList.add="activebuttona";
}
}
var elems = document.querySelectorAll('activebutton');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elems = document.querySelectorAll('activebuttona');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebuttona');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.classList.add="activebutton";
}
if(element.className=="buttona"){
element.classList.add="activebuttona";
}
}
Gewijzigd op 14/01/2013 22:51:03 door D B
Daarnaast is classList.add een functie en geen variabele.
Ik heb nu dit, maar het werkt helaas niet. (heb even onderaan de remove toegevoegd om te kijken of de 2classes elkaar niet in de weg zaten ofzo)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function changeClass(elementID){
var elems = document.querySelectorAll('.activebutton');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elems = document.querySelectorAll('.activebuttona');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebuttona');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.classList.remove('button');
element.classList.add('activebutton');
}
if(element.className=="buttona"){
element.classList.remove('buttona');
element.classList.add('activebuttona');
}
}
var elems = document.querySelectorAll('.activebutton');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebutton');
})
var elems = document.querySelectorAll('.activebuttona');
[].forEach.call(elems, function (elem) {
elem.classList.remove('activebuttona');
})
var element = document.getElementById(elementID);
if(element.className=="button"){
element.classList.remove('button');
element.classList.add('activebutton');
}
if(element.className=="buttona"){
element.classList.remove('buttona');
element.classList.add('activebuttona');
}
}
Maar dat kan denk ik wel kloppen want als ik de pagina open is er ook geen button die active is
Gewijzigd op 14/01/2013 23:04:51 door D B
http://bierens42.woelmuis.nl/testsite
Op deze site staat het ontwerp, als ik alleen het script uit post 1 gebruik word alle buttons wel zwart (dus dat stukje werkt) maar de uitbreidingen daarop helaas niet.
Toevoeging op 14/01/2013 23:09:15:
Het goede nieuws is dat ik hem aan de gang heb, het slechte nieuws is dat het niet werkt in IE, maar wel in google chrome
Is er voor dit javascripje ook een IE oplossing?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
// oude selector functie
var elems = document.getElementsByClassName('activebutton');
// oude for each loop
for (i=-1; elem = elems[++i]; ) {
// oude manier van verwijderen van een class
elem.className = elem.className.replace('activebutton', '');
// mocht je willen toevoegen doe je het zo: (vergeet de spatie voor activebutton niet!)
// elem.className += ' activebutton';
}
var elems = document.getElementsByClassName('activebutton');
// oude for each loop
for (i=-1; elem = elems[++i]; ) {
// oude manier van verwijderen van een class
elem.className = elem.className.replace('activebutton', '');
// mocht je willen toevoegen doe je het zo: (vergeet de spatie voor activebutton niet!)
// elem.className += ' activebutton';
}
Bedankt voor het meedenken.
Ik heb het scriptje nu aangepast zoals ik denk dat ik het nodig heb op mijn pagina, maar helaas nog steeds hetzelfde resultaat. Het werkt op Google Chrome, maar niet op IE.
Dit heb ik nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function changeClass(elementID){
var elems = document.getElementsByClassName('activebutton');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebutton', 'button');
}
var elems = document.getElementsByClassName('activebuttona');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebuttona', 'buttona');
}
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton";
}
else if(element.className=="buttona"){
element.className="activebuttona";
}
}
var elems = document.getElementsByClassName('activebutton');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebutton', 'button');
}
var elems = document.getElementsByClassName('activebuttona');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebuttona', 'buttona');
}
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton";
}
else if(element.className=="buttona"){
element.className="activebuttona";
}
}
Gewijzigd op 15/01/2013 10:03:15 door D B
Je kan een zelfgeschreven document.getElementsByClassName maken.
We noemen ze bv. getElementsByClassName (dus zonder document.)
Dit moet werken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
function changeClass(elementID) {
var elems = getElementsByClassName('activebutton');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebutton', 'button');
}
var elems = getElementsByClassName('activebuttona');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebuttona', 'buttona');
}
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton";
}
else if(element.className=="buttona"){
element.className="activebuttona";
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
if (document.getElementsByClassName && !parent) {
return document.getElementsByClassName(findClass);
}
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
</script>
function changeClass(elementID) {
var elems = getElementsByClassName('activebutton');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebutton', 'button');
}
var elems = getElementsByClassName('activebuttona');
for (i=-1; elem = elems[++i]; ) {
elem.className = elem.className.replace('activebuttona', 'buttona');
}
var element = document.getElementById(elementID);
if(element.className=="button"){
element.className="activebutton";
}
else if(element.className=="buttona"){
element.className="activebuttona";
}
}
/**
* IE < 9 kent document.getElementsByClassName blijkbaar niet. Dan maar een custom functie
* @see http://stackoverflow.com/questions/4404154/getelementsbyclassname-ie-resolution-issue
*/
function getElementsByClassName(findClass, parent) {
if (document.getElementsByClassName && !parent) {
return document.getElementsByClassName(findClass);
}
parent = parent || document;
var elements = parent.getElementsByTagName('*');
var matching = [];
for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){
if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
matching.push(elements[i]);
}
}
return matching;
}
</script>
Gewijzigd op 15/01/2013 10:51:35 door Kris Peeters
Hartstikke bedankt allemaal!
http://bierens42.woelmuis.nl/testsite < om het werkend te zien :)
Nogmaals bedankt!!