如何用JavaScript为多个元素实现同class的classList.toggle功能？

原代码核心问题 #

• 重复编写相同的点击事件逻辑，每个项目容器都复制一遍，后续新增容器还要重复写
• 箭头元素只取了第一个，导致所有点击操作都只影响第一个箭头
• 直接操作style.display控制显隐，代码冗余且不够优雅

优化思路与实现 #

1. 利用DOM结构关系替代ID依赖 #

每个项目容器的内部结构固定，点击容器时，通过this（当前点击的容器）直接查找内部的目标元素，不用再通过id逐个获取。

2. 统一绑定事件，复用处理函数 #

获取所有.projet-contain元素，循环给每个绑定同一个点击处理函数，彻底消除重复代码。

3. 用CSS类控制状态切换 #

新增.active类，统一控制项目内容的显示和箭头旋转，比直接操作style更易维护。

优化后的完整代码 #

HTML（仅修改内容容器的类名，结构保持一致）

<body>
    <section>
            <div id="prj1" class="projet-contain">
                <div class="preview">
                    <a>Projet Convertigo</a>
                    <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
                    <img src="images/Convertigo.png" class="convertigo" alt="">
                </div>
                <div class="projet-content">
                    <a>c'est la div 1</a>
                </div>
            </div>
            <div id="prj2" class="projet-contain">
                <div class="preview">
                    <a>Projet Convertigo</a>
                    <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
                    <img src="images/Convertigo.png" class="convertigo" alt="">
                </div>
                <div class="projet-content">
                    <a>c'est la div 2</a>
                </div>
            </div>
            <div id="prj3" class="projet-contain">
                <div class="preview">
                    <a>Projet Convertigo</a>
                    <img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
                    <img src="images/Convertigo.png" class="convertigo" alt="">
                </div>
                <div class="projet-content">
                    <a>c'est la div 3</a>
                </div>
            </div>
        </section>
 </body>

CSS（新增.active类，默认隐藏内容）

.projet-contain{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    width: auto;
    height: auto;
    background: radial-gradient(circle, rgba(238,174,202,0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
    border-radius: 10px 10px 10px 10px;
    padding: 10px;
    user-select: none;
    cursor: pointer; /* 增加点击提示 */
}

.preview{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section >div>div >a {
    text-decoration: none;
    color: white;
}

.convertigo{
    width: 10vw;
}

.arrow-down {
    transition: transform 0.5s;
    width: 1.5vw;
    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
            filter: invert(100%);
}

/* 新增active类控制状态 */
.projet-contain.active .arrow-down {
    transform: rotate(180deg);
}

.projet-content {
    display: none; /* 默认隐藏 */
}

.projet-contain.active .projet-content {
    display: flex;
}

JavaScript（精简逻辑，复用处理函数）

// 获取所有项目容器
const projetContainers = document.querySelectorAll('.projet-contain');

// 循环绑定点击事件
projetContainers.forEach(container => {
    container.addEventListener('click', function() {
        // 切换当前容器的active类，自动控制内部元素状态
        this.classList.toggle('active');
        console.log(`点击了${this.id}`);
    });
});

优化后的优势 #

• 新增项目容器时，无需修改JS代码，自动生效
• 代码量大幅减少，逻辑清晰，维护成本低
• 状态控制集中在CSS，符合前端开发最佳实践

内容的提问来源于stack exchange，提问作者Ravnow