Ik heb een pagina met grafieken gebouwd waar je door op de knop links en rechts van de grafiek een dag voor of achteruit kan. De knop zorgt voor een aanvulling in de url met de datum van morgen of gisteren. Ik heb echter een grafiek voor 2 variabelen. Standaard is variabele 1 geselecteerd en door op het vak van variabele 2 te klikken wordt de grafiek van variabele 2 weergegeven. Maar als je dan een dag voor of achteruit gaat wordt standaard weer de garfiek van variabele 1 weergegeven. Hoe zorg ik er voor dat je ook voor variabele 2 voor en achteruit kan bladeren zonder steeds van variabele moet wisselen?
Ik heb het versimpeld in onderstaande code samengevat:
<html>
<head>
<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>
<style type="text/css">
.knop{
width:20px;
height:100px;
float:left;
}
#datumvak{
width:200px;
height:100px;
background-color:#09F;
float:left;
margin-left:5px;
margin-right:5px;
margin-bottom:0px;
}
.vak{
width:80px;
height:80px;
border:1px solid black;
margin:2px;
padding:10px;
float:left;
}
.selected{
background-color:#FFF;
color:#000;
}
.deselected{
background-color:#F3F;
color:#FFF;
}
</style>
<?php
if (isset($_GET['datum'])) {//variabele datum in URL
$datum = $_GET['datum'];
}
else{
$datum = date("Y-m-d",time());
}
$terug = date("Y-m-d",(strtotime($datum)-86400));
$vooruit = date("Y-m-d",(strtotime($datum)+86400));
?>
</head>
<body>
<a href="test3.php?datum=<?php echo $terug; ?>"><input type="button" class="knop" value="<" /></a>
<div id="datumvak">
<?php
echo "de datum is $datum";
?>
</div>
<a href="test3.php?datum=<?php echo $vooruit; ?>"><input type="button" class="knop" value=">" /></a>
<div class="vak selected" onclick="CngClass(this)";>vak 1</div>
<div class="vak deselected" onclick="CngClass(this)";>vak 2</div>
</body>
</html>
1.992 views
