为同类元素添加JavaScript交互失效，移除类时抛出undefined错误如何解决

API 探路者

2026-10-6

问题根源

你在事件回调中使用target获取触发元素，但点击箭头/取消按钮时实际触发事件的是内部的<i>图标，不是你绑定事件的外层容器。同时你将target重命名为和外层查询到的arrow/cancel同名的变量，直接覆盖了外层的容器元素引用，导致逻辑执行异常。
取消操作的逻辑中没有同步重置箭头的激活状态，会导致二次点击箭头时交互失效。

修复后的完整JS代码

const containerDivs = document.querySelectorAll('.box.center');
containerDivs.forEach(containerDiv => {
    const leftContainer = containerDiv.querySelector('.left_container');
    const arrow = containerDiv.querySelector('.arr_container');
    const cancel =  containerDiv.querySelector('.cancel');

    arrow.addEventListener("click", () => {
        arrow.classList.add("active_arr");
        cancel.classList.remove("active_arr");
        if (leftContainer.classList.contains("off")) {
            leftContainer.classList.remove("off");
            leftContainer.classList.add("active");
        }
    });

    cancel.addEventListener("click", () => {
        cancel.classList.add("active_arr");
        arrow.classList.remove("active_arr");
        if (leftContainer.classList.contains("active")) {
            leftContainer.classList.remove("active");
            leftContainer.classList.add("off")
        }
    });
});