Dojo 1.7 Toggling Clicked Elements

by Thomas Upton

HTML

<h1>Remove class from all boxes</h1>
<div id="#container" class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<h1>Keep track of last-clicked box</h1>
<div id="#other-container" class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

.box {
    width: 200px;
    height: 50px;
    border: 1px solid red;
}

.clicked {
    background-color: red;
}

.container {
    margin: 25px 0;
}

JavaScript

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'));
    boxes.forEach(function(box) {
        on(box, 'click', function() {
            boxes.forEach(function(b) {
                dom_class.remove(b, 'clicked');
            });
            dom_class.add(box, 'clicked');
        });
    });
    
    var clicked = null,
        other_boxes = query('.box', dom.byId('#other-container'));
    
    other_boxes.forEach(function(box) {
        on(box, 'click', function() {
            if (clicked !== null) {
                dom_class.remove(clicked, 'clicked');
            }
            dom_class.add(box, 'clicked');
            clicked = box;
        });
    });
                            
});