如何在JavaScript中实现点击元素时切换类名并自动移除其他同级元素的类名

本教程详细介绍了如何在前端开发中实现一个常见的交互模式：当点击某个元素时，为其添加一个特定的css类，并同时确保其他同级元素移除该类。文章深入解析了htmlcollection与array之间的差异，并演示了如何利用array.from()和filter()方法高效地管理元素类名，以实现排他性选择效果，并提供完整的html、css和javascript代码示例。

在现代前端交互设计中，我们经常会遇到需要实现“排他性”选择的场景，例如手风琴菜单、选项卡切换、或简单的选中状态高亮。这意味着当一个元素被选中（例如，通过点击）时，它会获得一个特定的CSS类（如open、active等），而所有其他同级元素如果之前拥有这个类，则必须将其移除。这种模式确保了在任何给定时间只有一个元素处于“选中”状态。

核心挑战：HTMLCollection 与 Array 的转换

在使用原生JavaScript操作DOM时，通过 document.getElementsByTagName() 或 document.getElementsByClassName() 等方法获取的元素集合是 HTMLCollection（或 NodeList），它们是“类数组”对象，可以像数组一样通过索引访问 length 属性，但它们并不具备 Array.prototype 上的所有方法，例如 filter()。

因此，如果尝试直接在一个 HTMLCollection 上调用 filter()，将会抛出错误。解决这个问题的关键在于将 HTMLCollection 显式地转换为一个真正的 Array，这样我们就可以利用 Array 提供的强大方法进行操作。

实现排他性类名切换的步骤

为了实现点击元素时切换类名并移除其他同级元素的类名，我们可以遵循以下步骤：

立即学习“Java免费学习笔记（深入）”；

1. 获取所有目标元素： 首先，我们需要获取所有参与排他性选择的元素。
2. 为每个元素添加事件监听器： 遍历这些元素，并为每个元素绑定一个点击事件。
3. 在事件处理函数中：
   • 将获取到的元素集合转换为一个真正的 Array。
   • 使用 Array.prototype.filter() 方法，筛选出所有非当前点击的元素。
   • 遍历这些“其他”元素，并确保它们移除特定的类名。
   • 最后，切换当前点击元素的类名。

示例代码

下面通过一个具体的例子来演示如何实现这一功能。我们将创建两个 section 元素，点击其中一个时，它会变成红色，而另一个则恢复其原始背景色。

智谱AI开放平台

智谱AI大模型开放平台-新一代国产自主通用AI开放平台

85

查看详情

HTML 结构

我们使用一个简单的 main 容器包含两个 section 元素。

<main>
    <section class="left">
        <img src="https://picsum.photos/200/300" alt="随机图片">
    </section>
    <section class="right">
        <img src="https://picsum.photos/200/400" alt="随机图片">
    </section>
</main>

CSS 样式

CSS 部分定义了 section 的基本样式以及 section.open 状态的样式，使其在被选中时背景变为红色。

body {
    margin: 0;
}

main {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;   
}

section {
    transition: all 300ms ease-in-out; /* 添加过渡效果使类名切换更平滑 */
    padding-top: 2em;
    flex-grow: 2;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
}

section:nth-child(1) {
    background-color: lightblue;
}

section:nth-child(2) {
    background: rgb(137, 110, 148);
}

/* 当section具有open类时，背景变为红色 */
section.open {
    background: red;
}

img {
    width: 90%;
    align-self: center;
}

JavaScript 实现

这是实现核心逻辑的 JavaScript 代码。

document.addEventListener("DOMContentLoaded", function() {
    // 1. 获取所有section元素
    const sections = document.getElementsByTagName("section");

    // 2. 遍历每个section，并为其添加点击事件监听器
    Array.from(sections).forEach(function(section) {
        section.addEventListener('click', function() {
            // 3. 将HTMLCollection转换为Array，并过滤出所有非当前点击的section
            var otherSections = Array.from(sections).filter(element => element !== section);

            // 4. 遍历其他section，移除其"open"类
            otherSections.forEach(function(otherEl) {
                otherEl.classList.remove("open");
            });

            // 5. 切换当前点击section的"open"类
            section.classList.toggle("open");
        });
    });
});

代码解析

1. document.addEventListener("DOMContentLoaded", function() { ... });: 确保DOM完全加载后再执行JavaScript代码，避免因元素未加载而导致的错误。
2. const sections = document.getElementsByTagName("section");: 获取页面上所有 section 元素。此时 sections 是一个 HTMLCollection。
3. Array.from(sections).forEach(...): 这是关键一步。首先，Array.from(sections) 将 HTMLCollection 转换为一个真正的 JavaScript 数组。然后，我们对这个数组使用 forEach 方法，为每个 section 元素添加一个点击事件监听器。
4. var otherSections = Array.from(sections).filter(element => element !== section);:
   • 在事件处理函数内部，我们再次使用 Array.from(sections) 来获取一个包含所有 section 的数组。
   • filter(element => element !== section) 是一个高阶函数，它会遍历数组中的每个 element。如果 element 不等于当前被点击的 section，则将其保留在新数组 otherSections 中。这样，otherSections 就包含了除了当前点击元素之外的所有 section。
5. otherSections.forEach(function(otherEl) { otherEl.classList.remove("open"); });: 遍历 otherSections 数组，对其中的每一个元素调用 classList.remove("open")，确保它们不再拥有 open 类。
6. section.classList.toggle("open");: 最后，对当前被点击的 section 元素调用 classList.toggle("open")。如果该元素有 open 类，则移除它；如果没有，则添加它。

注意事项与优化建议

• 事件委托： 对于页面上大量同类元素需要绑定事件的情况，使用事件委托可以提高性能。将事件监听器绑定到它们的共同父元素上，然后通过 event.target 判断是哪个子元素触发了事件。
• 选择器： document.querySelectorAll() 方法返回的是 NodeList，它也需要 Array.from() 才能使用 filter() 等数组方法。不过，NodeList 自身支持 forEach() 方法，所以在某些场景下可以直接迭代。
• CSS 过渡： 在CSS中添加 transition 属性（如 transition: all 300ms ease-in-out;）可以使类名切换时的样式变化更加平滑，提升用户体验。
• 可访问性： 在实际项目中，考虑为这种交互添加适当的ARIA属性，以提高可访问性。

总结

通过本教程，我们学习了如何在JavaScript中实现一个通用的排他性类名切换机制。核心在于理解 HTMLCollection 和 Array 的区别，并利用 Array.from() 进行转换，然后结合 filter() 和 forEach() 方法高效地管理元素的类名。这种模式在构建动态和交互式前端界面时非常实用，是每个前端开发者都应该掌握的基础技能。

以上就是如何在JavaScript中实现点击元素时切换类名并自动移除其他同级元素的类名的详细内容，更多请关注php中文网其它相关文章！