Изменить класс элемента на клик, более элегантное решение

Question

Я использую часть своего свободного времени, чтобы узнать, что такое базовое программирование, и я наткнулся на какой-то удар. Следующий скрипт работает, но он совсем не изящный, и я подозреваю, что его можно решить с гораздо меньшим количеством кода.

<div class="naal brukbar" id="naal_1" onclick="writeText(brukbar); byttKlasse_1();"></div> 
<div class="naal circus" id="naal_2" onclick="writeText(circus); byttKlasse_2();"></div> 

В данном случае это карта с контактами, расположенными через CSS-координаторы. Вышеупомянутое значение по умолчанию.

«Проблема», если вы можете называть это тем, что я получил более 20 контактов, и, следовательно, JavaScript-код-меняющийся-javascript кажется излишним долговременным и остаточным.

JS:

function byttKlasse_1() 
{ 
    document.getElementById("naal_1").className = "over brukbar"; 

    document.getElementById("naal_2").className = "naal circus"; 
    document.getElementById("naal_5").className = "naal micro"; 
    document.getElementById("naal_6").className = "naal disko"; 
    document.getElementById("naal_7").className = "naal lundgreen"; 
    document.getElementById("naal_8").className = "naal kos"; 
    document.getElementById("naal_9").className = "naal raus"; 
    document.getElementById("naal_10").className = "naal mormors"; 
    document.getElementById("naal_11").className = "naal samfundet"; 
} 

мне нужно 25 + 1 из них (25 для штифтов OnClick и один для сброса один раз перезагружается сайт) Не знаю, если это уместно, но вот -

CSS:

.naal   { 
       position: relative; 
       background-image: url('bilder/naal.png'); 
       width:12px; 
       height:20px; 
       opacity:1; 
       } 

.over   { 
       position: relative; 
       background-image: url('bilder/naal_aktiv.png'); 
       width:12px; 
       height:20px; 
       opacity:.9; 
       cursor:pointer; 
       } 
.brukbar {top: -270px; left: 285px;} 
.circus  {top: -450px; left: 368px;} 

можно ли "массив" ее каким-то образом? Я не могу просто изменить один класс из-за расположения контактов на карте.

Answer 1

что-то в этом роде? (Я тестировался только в хроме)

JS

var current='x'; 
function smallBoxesHandler(e){ 
if(current!='x'){ 
    bigBox.childNodes[current].classList.remove('checked'); 
} 
current=Array.prototype.slice.call(e.target.parentNode.childNodes).indexOf(e.target); 
bigBox.childNodes[current].classList.add('checked'); 
} 
var bigBox=document.createElement('div'); 
bigBox.addEventListener('click',smallBoxesHandler,false); 
document.body.appendChild(bigBox).innerHTML=new Array(11+1).join('<div></div>'); 

CSS

body>div{ 
width:220px; 
border:1px solid rgba(0,0,0,0.5); 
overflow:auto; 
} 
body>div>div{ 
width:20px; 
height:20px; 
float:left; 
box-sizing:border-box; 
} 
body>div>div:hover{ 
border:1px dotted rgba(0,255,0,0.5); 
} 
body>div>div.checked{ 
border:1px dotted rgba(0,255,0,0.5); 
background-color:red; 
} 

Пример

http://jsfiddle.net/bg2Hw/

РЕДАКТИРОВАТЬ

с дополнительными стилями ....

http://jsfiddle.net/bg2Hw/1/

или

http://jsfiddle.net/bg2Hw/2/, http://jsfiddle.net/bg2Hw/3/