如何用JavaScript实现导航按钮区域背景色的点击切换功能？

需求说明 #

点击带有category-button类的按钮（包括其内部的img和h4元素）时，将该按钮所在的navGroup容器背景色切换为nav-bckStyle样式；再次点击时恢复为nav-bck的原始背景色。

现有代码问题 #

当前代码存在以下问题：

• 在按钮点击事件内重复给所有navGroup绑定点击事件，导致逻辑多次触发
• 使用event.target获取的是实际点击的子元素（如img或h4），而非目标navGroup容器，导致样式加错对象
• 错误移除所有navGroup的nav-bck类，破坏其他容器的原始样式

原始HTML代码 #

<div id="nav">
        <nav>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupA">
                    <img src="/3th/img/rice-kimchi.png" alt="rice and kimchi">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupB">
                    <img src="/3th/img/fruit-vegetable.png" alt="fruit and vegetable">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupC">
                    <img src="/3th/img/meat-seafood.png" alt="meat and seafood">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupD">
                    <img src="/3th/img/frozenFood-snack.png" alt="frozen-food and snack">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupE">
                    <img src="/3th/img/etc.png" alt="etc">
                    <h4>lorem</h4>
                </button>
            </div>
        </nav>
</div>

原始CSS代码 #

#nav nav {
  display: flex;
  flex-flow: row wrap;
  color: #fff;
  padding: 0 10px;
}
.nav-bck{
  background: rgb(1, 167, 1);
}
.nav-bckStyle{
  background: rgb(1, 107, 1);
}
#nav nav .navGroup {
  flex-grow: 1;
}
#nav nav .navGroup img {
  padding: 5px;
  height: 60px;
}
#nav nav .navGroup h4 {
  display: inline;
  vertical-align: middle;
  margin: 0 10px;
}
#nav nav button {
  background: transparent; 
  padding: 5px 10px;
  border: none;
}

有问题的JavaScript代码 #

categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            const navGroup = this.documentElement.querySelectorAll('.navGroup');
            console.log(navGroup);
    
            function navStyle(event){
                // 移除所有navGroup的nav-bck类
                navGroup.forEach((e) => {
                    e.classList.remove('nav-bck');
                });
    
                // 为点击的navGroup添加nav-bckStyle类
                event.target.classList.add('nav-bckStyle');
            }
    
            // 为每个navGroup添加点击事件
            navGroup.forEach((e) => {
                e.addEventListener('click', navStyle);
            });
        })
    })

正确代码实现 #

// 获取所有category-button按钮
const categoryButtons = document.querySelectorAll('.category-button');

// 给每个按钮绑定点击事件
categoryButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 找到当前按钮所在的navGroup父容器
    const navGroup = button.closest('.navGroup');
    
    // 切换样式类：互斥替换两个背景类
    navGroup.classList.toggle('nav-bck');
    navGroup.classList.toggle('nav-bckStyle');
  });
});

代码说明 #

• 使用button.closest('.navGroup')精准定位当前按钮的父容器，避免点击子元素导致的目标错误
• 直接给按钮绑定一次事件，无需重复绑定到navGroup，避免事件冗余
• 通过classList.toggle()简化样式切换逻辑，自动实现“点击切换、再次点击恢复”的效果
• 每个navGroup独立切换样式，不会影响其他容器的状态

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