Javascript 向数组中的项添加类并删除其他类

我想做一些很简单的事情。我有一份物品清单。如果我点击一个，它应该给它一个选择类。但是，如果我单击列表中的另一项。它应该从上一个元素中删除所选的类。这是我的javascript代码

const timeRangeWrapper = document.querySelector('.time-range');
const timeOptions = timeRangeWrapper.querySelectorAll('.times .time-option');
    timeOptions.forEach((item, i) => {
        const domIndex = item.getAttribute('data-item');
        item.addEventListener('click', () => {
            if (i == domIndex) {
                item.classList.add('selected');
            } else if (i !== domIndex && item.classList.contains('selected')){
                item.classList.remove('selected');
            }
        });
    });

这是我的标记

<div class="time-range">
    <span class="helper">Please select an exact booking time</span>
    <ul class="times">
        <li class="time-option" data-item="0">7.00PM</li>
        <li class="time-option" data-item="1">7.15PM</li>
        <li class="time-option" data-item="2">7.30PM</li>
        <li class="time-option" data-item="3">7.45PM</li>
        <li class="time-option" data-item="4">8.00PM</li>
   </ul>
   <div class="btn-wrapper form text-center mt-15">
       <button data-accept="true" data-time-exact="false" class="btn booking btn-custom-primary text-small bold text-uppercase">Confirm</button>
   </div>

请选择准确的预订时间

下午7点
下午7点15分
下午7:30
下午7:45
下午8点

证实

---

您可以首先从所有

选项中删除
.active
类，然后将类添加到单击的特定类中：


const timeRangeWrapper=document.querySelector（'.time range'）；
const timeOptions=timeRangeWrapper.querySelectorAll（'.times.time option'）；
timeOptions.forEach（（项目，i）=>{
const domIndex=item.getAttribute（'data-item'）；
item.addEventListener（'单击'，（）=>{
timeOptions.forEach（选项=>{
option.classList.remove（'selected'）；
})
如果（i==domIndex）{
item.classList.add（'selected'）；
}
});
});
。已选定{
边框：1px纯红；
}

请选择准确的预订时间

下午7点
下午7点15分
下午7:30
下午7:45
下午8点

证实
您可以首先从所有
选项中删除
.active
类，然后将类添加到单击的特定类中：


const timeRangeWrapper=document.querySelector（'.time range'）；
const timeOptions=timeRangeWrapper.querySelectorAll（'.times.time option'）；
timeOptions.forEach（（项目，i）=>{
const domIndex=item.getAttribute（'data-item'）；
item.addEventListener（'单击'，（）=>{
timeOptions.forEach（选项=>{
option.classList.remove（'selected'）；
})
如果（i==domIndex）{
item.classList.add（'selected'）；
}
});
});
。已选定{
边框：1px纯红；
}

请选择准确的预订时间

下午7点
下午7点15分
下午7:30
下午7:45
下午8点

证实
您可以使用一个单独的函数，先从所选项目中删除类，然后将所选类添加到项目中

const timeRangeWrapper = document.querySelector('.time-range');
const timeOptions = timeRangeWrapper.querySelectorAll('.times .time-option');
    timeOptions.forEach((item, i) => {
        item.addEventListener('click', function() {
            removeSelected(timeOptions);
            this.classList.add('selected');
        });
    });

function removeSelected(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].classList.remove('selected');
  }
}

const timeRangeWrapper=document.querySelector（'.time range'）；
const timeOptions=timeRangeWrapper.querySelectorAll（'.times.time option'）；
timeOptions.forEach（（项目，i）=>{
item.addEventListener（'单击'，函数（））{
removeSelected（时间选项）；
this.classList.add（'selected'）；
});
});
功能移除已选择（项目）{
对于（变量i=0；i
您可以使用一个单独的函数，先从所选项目中删除类，然后将所选类添加到项目中

const timeRangeWrapper = document.querySelector('.time-range');
const timeOptions = timeRangeWrapper.querySelectorAll('.times .time-option');
    timeOptions.forEach((item, i) => {
        item.addEventListener('click', function() {
            removeSelected(timeOptions);
            this.classList.add('selected');
        });
    });

function removeSelected(items) {
  for (var i = 0; i < items.length; i++) {
    items[i].classList.remove('selected');
  }
}

const timeRangeWrapper=document.querySelector（'.time range'）；
const timeOptions=timeRangeWrapper.querySelectorAll（'.times.time option'）；
timeOptions.forEach（（项目，i）=>{
item.addEventListener（'单击'，函数（））{
removeSelected（时间选项）；
this.classList.add（'selected'）；
});
});
功能移除已选择（项目）{
对于（变量i=0；i
使用jQuery操作DOM要容易得多：

const $items = $(".times .time-option");

$items.on("click", function() {
  $items.removeClass("selected");
  $(this).addClass("selected");
});

使用jQuery操作DOM要容易得多：

const $items = $(".times .time-option");

$items.on("click", function() {
  $items.removeClass("selected");
  $(this).addClass("selected");
});


不要使用“DomIndex”变量。更喜欢这种方式，它更具可读性和可靠性。
单击时，我们测试单击的对象是否不是已单击的对象。
然后，如果已经选择了一个LI，我们将其删除“.selected”，并将其交给新的LI

所有其他解决方案在每个“LI”上循环以移除一个潜在的“.选定”。。。它是无用的，可能会更长

不要使用“DomIndex”变量。更喜欢这种方式，它更具可读性和可靠性。
单击时，我们测试单击的对象是否不是已单击的对象。
然后，如果已经选择了一个LI，我们将其删除“.selected”，并将其交给新的LI

所有其他解决方案在每个“LI”上循环以移除一个潜在的“.选定”。。。它是无用的，可能会更长。
您正在对绑定的项进行循环，但没有出现
i！==domIndex
单击它时。您正在循环绑定的项目，但没有出现
i！==单击domIndex时，请单击它。