javascript - 将 JavaScript 代码添加到具有相同类的元素的问题

Question

我尝试将 JavaScript 函数添加到类似元素，但不幸的是它不起作用。

我还尝试使用 querySelectorAll 和 Foreach 修改 JavaScript 代码，但没有成功，它添加了类，但在删除类时它崩溃了，控制台一直抛出未定义的错误。

我将不胜感激任何帮助

谢谢你

const clc = document.querySelectorAll('.cancel');
const arr = document.querySelectorAll('.arr_container');
const left_container = document.querySelectorAll('.left_container');

arr.forEach(function (ar){
    ar.addEventListener("click", () => {
        ar.classList.add("active_arr");
        if (left_container.classList.contains("off")) {
            left_container.classList.remove("off");
            left_container.classList.add("active");
        }
    })
} );

clc.forEach(function (cl) {
    cl.addEventListener("click", () => {
        arr.classList.remove("active_arr");
        if (left_container.classList.contains("active")) {
            left_container.classList.remove("active");
            left_container.classList.add("off");
        }
    })
});

<div class="main center">
            <div class="box center">
                <img src="">
                <div>
                    <p class="user_name">Mor Maz</p>
                    <p class="skill">Front-end Developer</p>
                </div>
                <div class="arr_container center">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="left_container off">
                    <p>Skill</p>
                    <div class="skill">
                        <div>Html</div>
                        <div>Css</div>
                        <div>React</div>
                        <div>Node Js</div>
                    </div>
                    <div class="icons">
                        <i class="fab fa-github"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div class="cancel">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>
            <div class="box center">
                <img src="">
                <div>
                    <p class="user_name">Mor Maz</p>
                    <p class="skill">Front-end Developer</p>
                </div>
                <div class="arr_container center">
                    <i class="fas fa-arrow-right"></i>
                </div>
                <div class="left_container off">
                    <p>Skill</p>
                    <div class="skill">
                        <div>Html</div>
                        <div>Css</div>
                        <div>React</div>
                        <div>Node Js</div>
                    </div>
                    <div class="icons">
                        <i class="fab fa-github"></i>
                        <i class="fab fa-twitter"></i>
                        <i class="fab fa-facebook"></i>
                    </div>
                    <div class="cancel">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
            </div>
        </div>

标签： javascripthtml