Question

我试图实现非常简单的事情。我有一个项目清单。如果我点击一个它应该给它一个选定的类。但是如果我点击列表中的另一个项目。它应该从前一个元素中删除选定的类。这是我的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>

Answer 1

您可以先从所有.active中删除options类，然后将类添加到已点击的特定类：

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', () => {
            timeOptions.forEach(option => {
              option.classList.remove('selected');
            })
            if (i == domIndex) {
                item.classList.add('selected');
            }
        });
    });

.selected {
  border: 1px solid red;
}

<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>
</div>

Answer 2

使用jQuery更容易进行DOM操作：

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

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

Demo

Answer 3

您可以使用单独的功能首先从所选项目中删除该类，然后将所选类添加到您的项目中。

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');
  }
}

Answer 4

const timeRangeWrapper = document.querySelector('.time-range');
const timeOptions = timeRangeWrapper.querySelectorAll('.times .time-option');
let currentSelected = null; // Store the current selected LI
timeOptions.forEach((item, i) => {
    item.addEventListener('click', () => {
                if (item !== currentSelected) {
                    if (currentSelected) {
                        currentSelected.classList.remove('selected');
                    }
                    item.classList.add('selected');
                    currentSelected = item;
                }
                // else we do nothing, it means it is already selected.
    });
});

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

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

将类添加到数组中的项目并删除其他项目

4 个答案: