Question

我的想法是，当您将复选框1悬停时，相同的索引号将从同一位置显示相同的汽车。

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];

因此，如果我将鼠标悬停在第一个复选框上，它将记录"Bmw"，如果我将鼠标悬停在第四个复选框上，则将记录"Audi"。

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

for (var i = 0; i < chb.length; i++) {
  chb[i].addEventListener("mouseover", test);
}

function test() {
  console.log(carArray[i]);
}

body {
  display: flex;
  flex-direction: column;
}

<div><input type="checkbox"> 1</div>
<div><input type="checkbox"> 2</div>
<div><input type="checkbox"> 3</div>
<div><input type="checkbox"> 4</div>
<div><input type="checkbox"> 5</div>
<div><input type="checkbox"> 6</div>

Answer 1

您可以执行以下操作：

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

chb.forEach((x,i) => x.addEventListener("mouseover", () => test(i)))

const test = i => console.log(carArray[i]);

与您的代码有关的是，到i的时间传递到事件处理程序的值已经为6。

var carArray = ["Bmw", "Volvo", "Ferrari", "Audi", "Volkswagen", "Honda"];
var chb = document.querySelectorAll("input[type=checkbox]");

chb.forEach((x,i) => x.addEventListener("mouseover", () => test(i)))

function test(i) {
  console.log(carArray[i]);
}

body {
  display: flex;
  flex-direction: column;
}

<div><input type="checkbox"> 1</div>
<div><input type="checkbox"> 2</div>
<div><input type="checkbox"> 3</div>
<div><input type="checkbox"> 4</div>
<div><input type="checkbox"> 5</div>
<div><input type="checkbox"> 6</div>

Answer 2

querySelectorAll()返回一个NodeList，有很多方法可以将其转换为数组：

Array.from(querySelectorAll('query'));

有一个SO线程显示了处理此问题的各种方法：

Fastest way to convert JavaScript NodeList to Array?

在复选框上使用querySelectorAll显示数组

2 个答案: