Javascript 从以前的选择中删除类

我正在处理这部分代码

   <div class="single-select">
        <div class="single-title">
            <p class="title">User answear</p> <img src="../resources/chevron-down.svg" alt="">
        </div>
        <ul id="single-select-dropdown">
            <li class="option" id="option1">answear 1 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option2">answear 2 <img src="../resources/checkmark.svg" alt=""></li>
            <li class="option" id="option3">answear 3 <img src="../resources/checkmark.svg" alt=""></li>
        </ul>
    </div>

每次我选择选项时，JS都应该添加到类列表类“活动”。关键是只有一个选项可以包含这个类。有人能帮我每次选择其他选项时如何删除它吗？

将此添加到您的代码中

功能已选择（e）{
const newValue=e.target.textContent+''；
const titleElem=document.querySelector（'.single title.title'）；
titleElem.textContent=newValue；
//添加此部分
const listElem=document.getElementsByClassName（'option'）；
listElem.forEach（el=>{
el.classList.remove（'active'）；
};
e、 target.classList.add（'active'）；
}

您必须迭代并删除

活动的
类


const-dropdownpoptions=document.querySelectorAll（'.single-select.option'）；
dropdownpoptions.forEach（option=>option.addEventListener（'click'，handleOptionSelected））；
函数removeActive（）{
[…下拉选项].some（函数（选项）{
//我们正在使用.forEach，其中一些假设在任何给定时间只有一个活动类。如果您认为将有多个活动类，则可以使用.forEach而不是.some
const hasClass=option.classList.contains（'active'）；
如果（hasClass）{
option.classList.remove（'active'）；
}
返回类；
})
}
已选择功能（e）{
const newValue=e.target.textContent+''；
const titleElem=document.querySelector（'.single title.title'）；
titleElem.textContent=newValue；
removeActive（）；
e、 target.classList.add（'active'）
}
.active{
颜色：绿色；
}

用户服装

answear 1
answear 2
answear 3


将回调包装在匿名函数中：

//...
option.addEventListener('click', function(e) {
  handleOptionSelected(e);
});
//...


然后，在回调之前添加以下内容：

//...
//option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
//  handleOptionSelected(e);
//});
//...

现在，每当用户单击一个选项时，所有选项都将删除类
.active
——然后回调
handleOptionSelected（）
将向单击的选项添加
.active


演示
注意：添加了一个CSS伪元素，以证明一次只有一个
.option.active


const-dropdownpoptions=document.querySelectorAll（'.single-select.option'）；
dropdownOptions.forEach（选项=>{
option.addEventListener（'click'，函数（e）{
forEach（option=>option.classList.remove（'active'）；
已选择的手动模式（e）；
});
});
已选择功能（e）{
const newValue=e.target.textContent+''；
const titleElem=document.querySelector（'.single title.title'）；
titleElem.textContent=newValue；
e、 target.classList.add（'active'）；
}
.option:：after{
内容：''属性（类）
}

用户服装

answear 1
answear 2
answear 3

每次选择一个选项时，首先在循环中删除所有选项中的
活动
类，然后在最后分配给所选选项。
//...
//option.addEventListener('click', function(e) {
    dropdownOptions.forEach(option => option.classList.remove('active'));
//  handleOptionSelected(e);
//});
//...