Alternar background de elementos após clicar em um deles
Situação: dado um certo número de elementos, ao clicar em algum deles, este deve ganhar um background color, porém os demais elementos irmãos dessse, devem “perder”, e voltar para o estado original.
Algoritmo: remover o estado de todos os elementos antes de adicionar naquele que vc clicou.
Código: criei uma função loop(), apenas para iterar sobre os elementos. O restante é bem básico. Uma variável para cachear todos os elementos com a class .box, e um addEventListener para colocar a função no onclick deles.
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//polyfill.io/"></script> <style> .is-active { background: #f00; } </style> </head> <body> <div id="box1" class="box">Clique aqui</div> <div id="box2" class="box">Clique aqui</div> <div id="box3" class="box">Clique aqui</div> <div id="box4" class="box">Clique aqui</div> <script> (function () { "use strict"; /*jslint browser: true */ var $boxes = document.querySelectorAll('.box'), loop = function ($els, cb) { var i = $els.length; while (i > 0) { i -= 1; cb($els[i]); } }, resetBg = function ($els) { loop($els, function ($el) { $el.classList.remove('is-active'); }); }; loop($boxes, function ($box) { $box.addEventListener('click', function () { resetBg($boxes); this.classList.add('is-active'); }, false); }); }()); </script> </body> </html>