Question

我希望在单击任何 li 元素时执行该函数。我该怎么做？

var listItem = document.getElementById("listItem");

listItem.addEventListener("click", clickTodo)

function clickTodo() {
  listItem.style.color = "red"
}

ul li {
cursor: pointer;
}

<ul>
  <li id="listItem">One</li>
  <li id="listItem">Two</li>
  <li id="listItem">Other</li>
</ul>

Answer 1

ID 必须是唯一的，并且一个元素上的 eventListener 只能作用于一个元素

建议从最近的静态容器委托

增加的好处，你可以添加新的TODO，点击仍然有效

我还建议您使用 CSS 并切换类

var list = document.getElementById("list");

list.addEventListener("click", clickTodo)

function clickTodo(e) {
  const tgt = e.target;
  if (tgt.classList.contains("listItem")) tgt.classList.toggle("red");
}

ul li {
  cursor: pointer;
}

.red {
  color: red;
}

<ul id="list">
  <li class="listItem">One</li>
  <li class="listItem">Two</li>
  <li class="listItem">Other</li>
</ul>

Answer 2

您不应该有多个具有相同 ID 的元素。您应该改用类。

然后您可以使用 document.querySelectorAll 选择所有元素并为每个元素添加事件侦听器。

document.querySelectorAll('ul > li.listItem').forEach(li => 
    li.addEventListener('click', clickTodo));

function clickTodo() {
  this.style.color = "red"
}

ul li {
cursor: pointer;
}

<ul>
  <li class="listItem">One</li>
  <li class="listItem">Two</li>
  <li class="listItem">Other</li>
</ul>

Answer 3

listItem 应该是 class 而不是 id 来分组所有 li 元素。然后，使用 forEach 将事件侦听器添加到每个项目，如下所示：

const listItems = document.getElementsByClassName("listItem");

[...listItems].forEach(listItem => 
  listItem.addEventListener("click", clickTodo) 
);

function clickTodo() {
  this.style.color = "red"
}

ul li {
cursor: pointer;
}

<ul>
  <li class="listItem">One</li>
  <li class="listItem">Two</li>
  <li class="listItem">Other</li>
</ul>

Answer 4

而且 id 应该是唯一的并且用于单个元素。如果要选择多个元素，则应改用类。但在这种情况下，您可以直接选择元素：

const {  readFileSync } = require('fs');
const {exec} = require("child_process");
function executeEachFile(command){
    exec(command, (error, stdout, stderr) => {
        if(error){
            console.log(error);
        }
        console.log("stdout: " + stdout)
      });
}


function readFile(path){
    const output = readFileSync(path,"utf8").split("\n").map(file=>{
        return file.replace("\r","");
    });
    console.log(output)
    return output
};



function IntervalLoop(ArrayofFiles){
    let counter = 0;
    const interval  = setInterval(()=>{
        const commandName = "node "+ ArrayofFiles[counter]; 
        console.log(commandName);
        executeEachFile(commandName);
        counter++;
        console.log(counter);
        if (ArrayofFiles.length  == counter){
            clearInterval(interval);
        }
    },300)
}

const fileNames = readFile("exec.txt");
IntervalLoop(fileNames);

为什么点击事件监听器只工作一次

4 个答案: