CODEWITHSUNDEEP
javascriptclassonclick
Freshman
Freshman

Reputation: 303

Change element-class on click, more elegant solution

I'm using some of my spare time to learn som basic programming and I've hit kind of a bump. The following script works, but it's not elegant, at all, and I suspect that It can be solved with far less code.

<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>

In this case it is a map, with pins located trough CSS-coordinators. The above is the default.

The "problem" if you can call it that, is that i got more than 20 pins, and therfore the pin-class-changing-javascript seems unnecessary long and residual.

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";
}

I need 25 + 1 of these (25 for the pins onclick and one for the reset once the site reloads) Don't know if it's relevant, but here is the -

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;}

Is it possible to "array it up" somehow? I can't just change one class, due to the pins relative location on the map.

Upvotes: 0

Views: 104

Answers (1)

cocco
cocco

Reputation: 16706

something like that? (i tested only in chrome)

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;
}

example

http://jsfiddle.net/bg2Hw/

EDIT

with extra styles....

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

or

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

Upvotes: 2

Related Questions