javascript - 简化代码

Question

我的代码有点长，我想有办法简化它，看看吧:

var slidernav = document.getElementsByTagName('li');
slidernavinital = 20;
slidernavadd = 30;
slidernav[0].style.top = slidernavinital + slidernavadd*0 + 'px';
slidernav[1].style.top = slidernavinital + slidernavadd*1 + 'px';
slidernav[2].style.top = slidernavinital + slidernavadd*2 + 'px';
slidernav[3].style.top = slidernavinital + slidernavadd*3 + 'px';
slidernav[4].style.top = slidernavinital + slidernavadd*4 + 'px';
slidernav[5].style.top = slidernavinital + slidernavadd*5 + 'px';
slidernav[6].style.top = slidernavinital + slidernavadd*6 + 'px';
slidernav[7].style.top = slidernavinital + slidernavadd*7 + 'px';
slidernav[8].style.top = slidernavinital + slidernavadd*8 + 'px';
slidernav[9].style.top = slidernavinital + slidernavadd*9 + 'px';
slidernav[10].style.top = slidernavinital + slidernavadd*10 + 'px';
slidernav[11].style.top = slidernavinital + slidernavadd*11 + 'px';

不可能做这样的事情:

document.getElementsByTagName('li')[x].style.top = 20 + 30*x + 'px';

提前致谢!

Answer 1

是的。将其包装在 for 循环中。

for(var i = 0; i < sliderNav.length; i++) {
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
}

不过，如果您对循环一无所知(如果计算机不为您处理重复的内容，那它还有什么意义呢？)

编辑:顺便说一句，for 循环是以下 while 循环结构的简写:

var i = 0;
while(i < sliderNav.length) {
    sliderNav[i].style.top = sliderNavInitial + sliderNavAdd*i + "px";
    i++;
}

它只是将所有“簿记”放在循环的第一行，这样您就可以更轻松地预测它将循环多少次。 (while 循环只是循环直到满足条件，然后停止，所以如果您忘记包含 i++; 部分，它将永远不会停止。)