class wijzigen mbv javascript

Door Rene Zwolsman op 03-10-2012 12:55

1.980 views

Ik heb een pagina met een aantal div's welke standaard een blauwe achtergrondkleur hebben. Door er op te klikken moet de betreffende div wit worden. Standaard bij openen van de pagina is de eerste div wit. Het wisselen van kleuren werkt maar de eerste div blijft wit als je een andere aanklikt tenzij je de eerste div al aangeklikt hebt. Hoe verander ik dit?

<style type="text/css">

body{
font-family: Arial, Helvetica, sans-serif;
}

.deselected{
width:200px;
height:200px;
display:block;
border:1px solid black;
background-color:#09F;
color:#FFF;
float:left;
margin-right:10px;
}
.selected{
width:200px;
height:200px;
display:block;
border:1px solid black;
background-color:#FFF;
color:#000;
float:left;
margin-right:10px;
}
p{
margin:10px;
font-size:20px;
}

</style>

<script type="text/javascript">
var Lst;
function CngClass(obj){
if (Lst) Lst.className='deselected';
obj.className='selected';
Lst=obj;
}
</script>
</head>

<body>
<div class="selected" onclick="CngClass(this);"><p>vak 1</p></div>
<div class="deselected" onclick="CngClass(this);"><p>vak 2</p></div>
<div class="deselected" onclick="CngClass(this);"><p>vak 3</p></div>
<div class="deselected" onclick="CngClass(this);"><p>vak 4</p></div>
</body>
</html>

Sander Z

03-10-2012 15:03

Vak 1 staat als class al standaard op selected.
Zodra iemand klikt op een ander vak pas je mbv javascript alleen dat vak aan, daar gaat het "fout".

Kris Peeters

03-10-2012 16:54 gewijzigd op 03-10-2012 17:54

Mijn eerste reactie is om het zo ongeveer te doen

EDIT: blijkbaar geeft document.getElementsByClassName problemen met IE < 9.
Intussen aangepast, met een custom getElementsByClassName


...
<script type="text/javascript"> 
function CngClass(obj) { 
  var vakken = getElementsByClassName('vak');  // wegens IE > 9 ... geen documents.getElementsByClassName, maar een custom functie
  for(var i=0; i<vakken.length; i++) {
    if(vakken[i] == obj) {
      // het geklikte object
      if(hasClass(obj, 'deselected')) {
        removeClass(obj, 'deselected');
      }
      if(!hasClass(obj, 'selected')) {
        addClass(obj, 'selected');
      }
    }
    else {
      // al de rest
      if(hasClass(vakken[i], 'selected')) {
        removeClass(vakken[i], 'selected');
      }
      if(!hasClass(vakken[i], 'deselected')) {
        addClass(vakken[i], 'deselected');
      }
    }
  } 
} 
/**
* 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) {
  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;
}

/**
*  @see http://www.avoid.org/?p=78
*/
function hasClass(el, name) {
   return new RegExp('(\\s|^)'+name+'(\\s|$)').test(el.className);
}
function addClass(el, name) {
   if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') +name; }
}
function removeClass(el, name) {
   if (hasClass(el, name)) {
      el.className=el.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
   }
}
</script> 
</head> 
<body> 
<div class="vak selected"   onclick="CngClass(this);"><p>vak 1</p></div> 
<div class="vak deselected" onclick="CngClass(this);"><p>vak 2</p></div> 
<div class="vak deselected" onclick="CngClass(this);"><p>vak 3</p></div> 
<div class="vak deselected" onclick="CngClass(this);"><p>vak 4</p></div> 
</body> 
</html>

---
Je kan eventueel de gemeenschappelijke css verhuizen naar
.vak {}
Het lijkt me stabieler als enkel de kleuren veranderen en de grootte en positionering niet wordt aangepast


.deselected { 
  color:#FFF; 
  background-color:#09F; 
} 
.selected { 
  color:#000; 
  background-color:#FFF; 
} 
.vak {
  width:200px; 
  height:200px; 
  display:block; 
  border:1px solid black; 
  float:left; 
  margin-right:10px; 
  
}

Rene Zwolsman

05-10-2012 09:53

Het werkt! Bedankt. Ik ben nog niet zo thuis in javascript dus het is even uitvogelen hoe e.e.a. precies werkt. Het bovenste deel begrijp ik maar waarom is het 2e deel (vanaf /** IE <9 ....) nog nodig? In Chrome werkt het ook niet zonder het tweede deel.

Kris Peeters

05-10-2012 10:10

De andere browsers hebben de functie
document.getElementsByClassName

IE < 9 kent die functie niet, waardoor ik dus een custom getElementsByClassName moest zoeken.

Met Chrome kan je dus (de aanroep van) die custom functie vervangen door document.getElementsByClassName

Reageren

Inloggen om te reageren