控制来自单个事件侦听器的多个元素

Question

我试图从一个事件监听器切换2个元素上的类，但只有第一个元素得到修改。

const toggleBtn = document.querySelector(".toggle-btn");
const slideoutSidebar = document.querySelector(".slideout-sidebar");
const slideTheBar = function () {
toggleBtn.classList.toggle("toggle-slide");
slideoutSidebar.classList.toggle("slideout-slide");
};
toggleBtn.addEventListener("click", slideTheBar);

我有这两个元素(toggleBtn, slideoutSidebar)，我已经创建了一个函数，为每个元素切换一个类。然后将此函数附加到toggleBtn元素的事件侦听器。

问题是当事件执行时，只有函数的第一行代码是工作的toggleBtn.classList.toggle("toggle-slide");

，而第二个slideoutSidebar.classList.toggle("slideout-slide");则不是。我做错了什么?

Answer 1

这似乎是工作良好?

const toggleBtn = document.querySelector(".toggle-btn");
const slideoutSidebar = document.querySelector(".slideout-sidebar");
console.log(toggleBtn);
const slideTheBar = function () {
toggleBtn.classList.toggle("toggle-slide");
slideoutSidebar.classList.toggle("slideout-slide");
};
toggleBtn.addEventListener("click", slideTheBar);

.slideout-sidebar {
display: block;
height: 200px;
width: 100px;
position: absolute;
top: 0;
right: -200px;
background: #F05D7C;
color: #fff;
font-size: 20px;
transition: all 0.3s ease-in;
}
.slideout-slide.slideout-slide {
right: 0
}

<button class="toggle-btn">Toggle</button>
<div class="slideout-sidebar">Slide me in</div>