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似乎不必要很长且残留。

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/

点击更改元素类，更优雅的解决方案

1 个答案: