简化守则

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++;部分，它将永远不会停止。）

Answer 2

使用循环遍历元素。

var slidernav = document.getElementsByTagName('li');
slidernavinital = 20;
slidernavadd = 30;
for (var n = 0; n<slidernav.length; n++) {
    slidernav[n].style.top = slidernavinital + slidernavadd*n + 'px';
}

Answer 3

您可以使用for

像这样

var ln = slidernav.length;
for(var i = 1;i<=ln;i++)
{
    slidernav[i].style.top = slidernavinital + slidernavadd*i + 'px';
}

这是一个非常简单的编程结构。