say I have many divs and each div trigger an event when clicked - dojo

Question

Dojo 1.7
say I have many divs and each div trigger an event when clicked. So when I cilck a div, dojo adds a class, say "clicked" to the div. But how can I set it so when I click another div, it removes the previous div class "clicked" and gives it to the div that I just clicked?
This is because if I clicked on one div it supposed to change its background and remove the background from the previously clicked div
Thanks!!!

Answer 1

You can put all these div in one container, for example
<div class='RadioDivContainer'>
<div> </div>
....
<div> </div>
<div>
Then do this in onclick event handler of divs:
dojo.query(".RadioDivContainer .clicked").forEach(function(node){
dojo.removeClass(node, "clicked");
});
dojo.addClass(evt.target, "clicked");
This is just show the idea how to implement it. You can change it to suit your case.

Answer 2

You can remove the clicked class from all the elements in the group before applying the clicked class to the newly-clicked element.
Using Dojo 1.7:
require([
'dojo/query',
'dojo/dom-class',
'dojo/on',
'dojo/dom',
'dojo/domReady!'
], function(query, dom_class, on, dom) {
var boxes = query('.box', dom.byId('#container')); // get elements inside #container
boxes.forEach(function(box) {
on(box, 'click', function() {
boxes.forEach(function(b) {
dom_class.remove(b, 'clicked');
});
dom_class.add(box, 'clicked');
});
});
});
Here's a fiddle.
You could also keep track of the last clicked element and remove the clicked class from that. You can see both examples in the fiddle.

Answer 3

You should enable hooks to your desired DOM elements with dojo.query, handle click events using dojo.on and assign/unassign classes with dojo/dom-class. Give the div elements a shared class to denote that they are part of this clickable unit, then listen for click events on all of them and assign classes as necessary. See this JSfiddle, using Dojo 1.7.4:
HTML
<div class="mutable"></div>
<div class="mutable"></div>
<div class="mutable"></div>
Javascript/Dojo
require(["dojo/query", "dojo/dom-class", "dojo/on", "dojo/domReady!"], function(query, domClass, on) {
on(query(".mutable"), "click", function(e) {
query(".mutable").forEach(function(node) {
domClass.remove(node, "clicked");
});
domClass.add(this, "clicked")
});
});
CSS
.mutable {
background-color:red;
}
.clicked {
background-color:green;
}
div {
border:2px solid black;
margin:5px;
}
This will also work with Dojo 1.8.x and 1.9.x.