如何将EventListener添加到querySelectorAll以及何时触发获取元素索引（或id，值）？

Question

我正在站点菜单中制作背景选择器，当用户单击规范时，它将更改 backgroundImage。 图像（触发单选按钮）。 我想使用 querySelectorAll(".selected") 来完成它，循环它并设置 addEventListener(click, ..) 获取索引（或 id，值）并使用 background_list 数组设置 backgroundImage。

var background_list = ["/images/air-balloon.jpg","/images/mary-christmas.jpg","/images/mountain.jpg","/images/panorama.jpg","/images/plants.jpg","/images/sunset-mountain.jpg","/images/underwater-star.jpg","/images/vinyl-player.jpg"...]

<div class="dropdown-background-container">

    <div>
        <input                  
            type="radio"
            id="image-1"
            class="select"
            value="1"
        >
        <label for="image-1">
            <img src="/images/air-balloon-small.jpg" alt="Air Balloons">
        </label>
    </div>
    <div>
        <input
            type="radio"
            id="image-2"
            class="select"
            value="2"
        >
        <label for="image-2">
            <img src="/images/mary-christmas-small.jpg" alt="Mary Christmas">
        </label>
    </div>

例如我有几十张图片

document.querySelectorAll(".select").forEach( item => {
      item.addEventListener('click', arrow => {
      document.body.style.backgroundImage = `url("${background_list[index]}")`
    })})

有什么方法可以找到触发的索引（id 或 value）？ 您将如何为此实现代码，最简单的解决方案是什么？ 我是 JS 的初学者

Answer 1

在使用这些数组迭代函数时，您可以通过添加额外参数来找到数组中元素的索引（索引是 forEach 的第二个参数）：

document.querySelectorAll(".select").forEach((item, index) => { // here
      item.addEventListener('click', arrow => {
      document.body.style.backgroundImage = `url("${background_list[index]}")`
})})