Question

我的问题是 - 我有这个HTML代码

<header>
  <h1>Javascript Events</h1>
</header>
<main>
  <ul id="checklist">
    <li>
      <span>Apples</span>
      <input value="Apples" />
    </li>
    <li><span>Oranges</span>
      <input value="Oranges" />
    </li>
    <li><span>Bananas</span>
      <input value="Bananas" />
    </li>
  </ul>
</main>

我的目的是为每个“li”和“input”元素添加一个EventListener。

我可以用for循环

来做到这一点

let checklist = document.getElementById("checklist");

let items = checklist.querySelectorAll("li");
let inputs = checklist.querySelectorAll("input");

for(let i = 0; i<lists.length; i++){
  items[i].addEventListener("click", Open)
  inputs[i].addEventListener("blur", Change)
  inputs[i].addEventListener("keypress", Great)
 }

所以我决定尝试用forEach做同样的事情，这就是我的想法：

items.forEach(x => {
 x.addEventListener("click", EditItem)
  })

inputs.forEach((x) =>{
    x.addEventListener("blur", updateItem)
    x.addEventListener("keypress", itemKeypress);
})

不幸的是，这段代码无效，我认为这是因为变量“items”不是数组。

是什么原因导致我的代码不起作用以及什么是潜在的解决方案？

let checklist = document.getElementById("checklist");

let items = checklist.querySelectorAll("li");
let inputs = checklist.querySelectorAll("input");

items.forEach(x => {
  x.addEventListener("click", EditItem)
})

inputs.forEach((x) => {
  x.addEventListener("blur", updateItem)
  x.addEventListener("keypress", itemKeypress);
})

function EditItem(){ console.log('edit'); }
function updateItem(){ console.log('udpate'); }
function itemKeypress(){ console.log('keypress'); }

<header>
  <h1>Javascript Events</h1>
</header>
<main>
  <ul id="checklist">
    <li>
      <span>Apples</span>
      <input value="Apples" />
    </li>
    <li><span>Oranges</span>
      <input value="Oranges" />
    </li>
    <li><span>Bananas</span>
      <input value="Bananas" />
    </li>
  </ul>
</main>

Answer 1

工作正常

let checklist = document.getElementById("checklist");

let items = checklist.querySelectorAll("li");
let inputs = checklist.querySelectorAll("input");

items.forEach(x => {
  x.addEventListener("click", EditItem)
});

inputs.forEach((x) => {
  x.addEventListener("blur", updateItem)
  x.addEventListener("keypress", itemKeypress);
});

function EditItem() { console.log('Edit'); }
function updateItem() { console.log('update'); }
function itemKeypress() { console.log('keypress'); }

  <ul id="checklist">
    <li>
      <span>Apples</span>
      <input value="Apples" />
    </li>
    <li><span>Oranges</span>
      <input value="Oranges" />
    </li>
    <li><span>Bananas</span>
      <input value="Bananas" />
    </li>
  </ul>

使用forEach循环遍历元素

1 个答案: