Javascript 为什么我尝试在HTML元素中添加和删除类只能以一种方式工作？

非常基本的任务，不必担心编码风格本身。我相信还有更有效、更漂亮的编码方式。问题是为什么代码没有按预期的方式工作：它应该添加类“a”，删除类“b”，反之亦然（取决于当前附加的类）。但它只能以一种方式工作，类“closed”可以附加，但是“open”将不再工作。为什么呢

HTML

JS

在这部分代码中

document.querySelectorAll("li.closed")[0].addEventListener("click", undoTask);
document.querySelectorAll("li.closed")[1].addEventListener("click", undoTask);
document.querySelectorAll("li.closed")[2].addEventListener("click", undoTask);

您正试图将

单击

函数添加到

li.closed

，但在您单击之前，没有任何

li.closed

。您可以创建另一个函数（

doSomething

在下面的示例中）来检查目标类，然后

doTask

或

undoTask

取决于包含的类，如下所示

function setup () {
    document.querySelectorAll("li.open")[0].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[1].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[2].addEventListener("click", doTask);
}

    function doTask(event) {
        if (!event.target.classList.contains("open")) {
            undoTask(event);
        } else {
                    event.target.classList.remove("open");
                event.target.classList.add("closed");    
        }
    }

    function undoTask(event) {
        event.target.classList.remove("closed");
        event.target.classList.add("open");
    }

函数点任务（事件）{
event.target.classList.remove（“打开”）；
event.target.classList.add（“已关闭”）；
}
函数撤消任务（事件）{
event.target.classList.remove（“关闭”）；
event.target.classList.add（“打开”）；
}
功能剂量测量（事件）{
if（event.target.classList.contains（'open'））{
doTask（事件）；
}否则{
撤销任务（事件）；
}
}
函数设置（）{
document.querySelectorAll（“li”）[0]。添加了EventListener（“单击”，doSomething）；
document.querySelectorAll（“li”）[1]。添加了EventListener（“单击”，doSomething）；
document.querySelectorAll（“li”）[2]。添加了EventListener（“单击”，doSomething）；
}
window.addEventListener（“加载”，设置）
。打开{文本装饰：下划线；}
.closed{文本装饰：行通过；}

aaaaaaa
BBBBB
CCCCC
问题在于，您正在将事件侦听器添加到
设置（）函数中的这些元素中：

document.querySelectorAll("li.closed")[0]
document.querySelectorAll("li.closed")[1]
document.querySelectorAll("li.closed")[2]

执行
setup（）
时，这些元素不存在。这就是为什么当用
class=“closed”
单击
元素时，它将不起作用

解决方案是在单击特定元素后检查该元素的类。像这样：


仅函数单击（事件）{
如果（event.target.className=='open'）event.target.className='closed'；
else event.target.className='open'；
}
函数设置（）{
for（document.querySelectorAll（'li'）的变量li）li.addEventListener（'click'，only单击）；
}
设置（）
.open:：after{
内容：“开放”；
}
.关闭：：之后{
内容：“已关闭”；
}




这是因为对于像这样的行
document.queryselectoral（“li.closed”）[0]。addEventListener（“单击”，撤消任务）。它试图将事件添加到根本不存在的元素中

实际上，您可能不需要单独的函数来删除该类

使用方法切换类


函数点任务（事件）{
event.target.classList.toggle（“closed”）；
}
函数设置（）{
document.querySelectorAll（“li”）[0]。addEventListener（“单击”，点任务）；
document.querySelectorAll（“li”）[1]。addEventListener（“单击”，点任务）；
document.querySelectorAll（“li”）[2]。addEventListener（“单击”，点任务）；
}
window.addEventListener（“加载”，设置）
。打开{
文字装饰：下划线；
}
.关闭{
文字装饰：线条贯通；
}

aaaaaaa
BBBBB
CCCCC
像这样试试

function setup () {
    document.querySelectorAll("li.open")[0].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[1].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[2].addEventListener("click", doTask);
}

    function doTask(event) {
        if (!event.target.classList.contains("open")) {
            undoTask(event);
        } else {
                    event.target.classList.remove("open");
                event.target.classList.add("closed");    
        }
    }

    function undoTask(event) {
        event.target.classList.remove("closed");
        event.target.classList.add("open");
    }

document.querySelectorAll("li.closed")[0]
document.querySelectorAll("li.closed")[1]
document.querySelectorAll("li.closed")[2]

function setup () {
    document.querySelectorAll("li.open")[0].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[1].addEventListener("click", doTask);
    document.querySelectorAll("li.open")[2].addEventListener("click", doTask);
}

    function doTask(event) {
        if (!event.target.classList.contains("open")) {
            undoTask(event);
        } else {
                    event.target.classList.remove("open");
                event.target.classList.add("closed");    
        }
    }

    function undoTask(event) {
        event.target.classList.remove("closed");
        event.target.classList.add("open");
    }