如何在子元素上添加/删除类

Question

见下面的代码：

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div class="nk-section-l-icons">
                <div class="nk-section-icons fav" data-title="Favorites">
                    <div class="nk-sec-container nk-sec-fav-c">

                    </div>
                </div>
                <div class="nk-section-icons recent" data-title="Recent">
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons notifs" data-title="Notifications">
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </div>
                </div>
            </div>

​

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
    hrdBtns.addEventListener("click", (container)=> {
        const btnContainer = container.currentTarget.children[0]

        btnContainer.classList.toggle("addClass")
    })
})

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div class="nk-section-l-icons">
                <div class="nk-section-icons fav" data-title="Favorites">
                    <div class="nk-sec-container nk-sec-fav-c addClass">

                    </div>
                </div>
                <div class="nk-section-icons recent" data-title="Recent">
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons notifs" data-title="Notifications">
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </div>
                </div>
            </div>

​

有人能帮我吗，目前我的javascript正在工作--它正在添加和删除类addClass？但是我需要再次单击按钮来删除addClass。我的目标是我希望我的代码，如果我点击第二个按钮，addClass在我的孩子的第一个div将删除，它将转移到第二个按钮的孩子的div。

Answer 1

​

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
    hrdBtns.addEventListener("click", (container)=> {
    
        // new code: remove active state on all others
        hrdBtn.forEach(button => button.children[0].classList.remove('addClass'))
        
        const btnContainer = container.currentTarget.children[0]

        btnContainer.classList.toggle("addClass")
    })
})

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons .nk-sec-container {
    r
}

.nk-sec-container {
    height: 100%;
    width: 150px;
    background: green;
    position: absolute;
    left: 50px;
    margin: bottom: 10px;
}

.nk-sec-container.addClass {
    background: red;
}

<div class="nk-section-l-icons">
                <div class="nk-section-icons fav" data-title="Favorites">
                    <div class="nk-sec-container nk-sec-fav-c addClass">

                    </div>
                </div>
                <div class="nk-section-icons recent" data-title="Recent">
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons notifs" data-title="Notifications">
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </div>
                </div>
            </div>

​

Answer 2

因为addClass只有一个元素，所以可以选择带有document.querySelector(".addClass")的元素并删除类。

​

const hrdBtn = document.querySelectorAll(".nk-section-icons")
hrdBtn.forEach((hrdBtns)=> {
  hrdBtns.addEventListener("click", (container)=> {

    document.querySelector(".addClass").classList.remove("addClass");

    const btnContainer = container.currentTarget.children[0];
    btnContainer.classList.toggle("addClass");
  })
})

.nk-section-icons {
  height: 30px;
  min-width: 30px;
  width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  position: relative;
  background: yellow;
  margin-bottom: 5px;
}

/*.nk-section-icons .nk-sec-container {
  r
}*/

.nk-sec-container {
  height: 100%;
  width: 150px;
  background: green;
  position: absolute;
  left: 50px;
  margin: bottom: 10px;
}

.nk-sec-container.addClass {
  background: red;
}

<div class="nk-section-l-icons">
  <div class="nk-section-icons fav" data-title="Favorites">
    <div class="nk-sec-container nk-sec-fav-c addClass"></div>
  </div>
  <div class="nk-section-icons recent" data-title="Recent">
    <div class="nk-sec-container nk-sec-recent-c"></div>
  </div>
  <div class="nk-section-icons notifs" data-title="Notifications">
    <div class="nk-sec-container nk-sec-notif-c"></div>
  </div>
</div>

​