Question

我正在尝试创建一个滑块，而下面的代码计算幻灯片的宽度是有效的，它会在控制台中引发错误。循环的正确方法和这些元素的宽度是什么？

的Javascript

var calcSlideWidth = function(divId){
    let slDiv = document.getElementById(divId);
    let slides = slDiv.getElementsByClassName('slide');
    slDiv.style = "width:"+ 100*slides.length +"%";
    slideWidth = 100/slides.length;
    for (let i = 0; i <= slides.length; i++ ){
        slides[i].style = " width:"+ slideWidth +"%";
        console.log(i);
    }
}   

window.onload  = function(){
   calcSlideWidth("slider");
}

HTML

<div class="slider-container">
    <ul id="slider">
        <li class="slide"><span>Slide 1</span></li>
        <li class="slide"><span>Slide 2</span></li>
        <li class="slide"><span>Slide 3</span></li>
    </ul>
</div>

Answer 1

getElementsBy *方法返回HTMLCollections，这可能很难处理。请考虑使用querySelectorAll，它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代时不会改变，而且它更灵活。

document.querySelectorAll('.slide').forEach(slide => {
  // do stuff with each slide
  slide.style.width = `${slideWidth}%`;
});

for循环无法清楚地表明代码的意图，因此应尽可能避免（更喜欢高阶函数，例如.map，.reduce，.filter，...）。另请参阅：http://qr.ae/RNMEGA和https://gist.github.com/robotlolita/7643014

（通过.forEach

，你永远不会有一个错误的错误）

请注意，NodeList.forEach是一种新的浏览器不支持的新方法 - 如果使用此方法，请确保在分发之前正确填充。

Answer 2

错误肯定是位置length

的访问权限

let i = 0; i <= slides.length
              ^

该条件将访问无现有位置，因此您需要使用此：

let i = 0; i < slides.length
             ^

这样，访问权限将从0到length - 1

循环HTML集合的正确方法是什么

2 个答案: