使用ES6纯Javascript将路径数组中的html集合（img）的src属性设置为在每个

Question

我有一个src值数组，如[path1，path2，path3]和一个与arr值相同的数组长度的html集合。因此，我想传递每个值来设置html元素的src。我该怎么办？我尝试了 forEach，for Of，map，但它仍然是同一路径中的所有元素，或者只是设置了一个（第一个元素）。

//My code now

<img alt='first-in-collection'>

<img alt='second-in-collection'>

<img alt='third-in-collection'> 

//The variable

let arr = ['path1', 'path2', 'path3']

//Expected result 

<img src='path1' alt='first-in-collection'>

<img src='path2' alt='second-in-collection'>

<img src='path3' alt='third-in-collection'>

Answer 1

无需同时在映像数组和路径数组上运行循环。在任何一个阵列上运行循环。继续递增迭代器计数，并设置当前迭代器索引图像的 src。let arr = ['path1', 'path2', 'path3'];\// get all imageslet img = document.getElementsByClassName('img-thumbnail')// initialize iterator with 0&nbsp; &nbsp;&nbsp;let i=0;&nbsp; &nbsp; &nbsp;for(let el of arr){&nbsp; &nbsp; &nbsp; &nbsp;// set attribute of corresponding image&nbsp; &nbsp; &nbsp; &nbsp; img[i++].setAttribute('src', el)&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }<div class="col-8">&nbsp; &nbsp; <div class="row produit-desc-lense">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 text-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid rounded img-thumbnail" alt="/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>caméra 2</h5>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="selectNumber">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Choose a number</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><div class="row produit-desc-lense">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 text-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid rounded img-thumbnail" alt="/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>caméra 2</h5>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="selectNumber">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Choose a number</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div><div class="row produit-desc-lense">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 text-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="img-fluid rounded img-thumbnail" alt="/">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>caméra 2</h5>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-4 d-flex align-items-center justify-content-center border-bottom">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="selectNumber">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>Choose a number</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;</div>