Vanilla JS 從先前的選擇中刪除 class

Question

我正在使用這部分代碼

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

const dropdownOptions = document.querySelectorAll('.single-select .option');

dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected));

function handleOptionSelected(e) {
    const newValue = e.target.textContent + ' ';
    const titleElem = document.querySelector('.single-title .title');
    titleElem.textContent = newValue;
    e.target.classList.add('active')
}

每次當我選擇選項 JS 時，應該添加到 class 列表 class '活動'。 關鍵是只有一個選項可以有這個 class 。 每當我選擇其他選項時，有人可以幫我如何刪除它嗎？

Answer 1

1. 將回調包裝在匿名 function 中：

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

2. 然后在回調之前添加以下內容：

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

   現在，每當用戶單擊一個選項時，所有選項都會刪除 class .active - 然后回調handleOptionSelected()會將.active添加到單擊的選項。

---

演示

注意：添加了一個 CSS 偽元素來證明一次只有一個.option.active 。

 const dropdownOptions = document.querySelectorAll('.single-select.option'); dropdownOptions.forEach(option => { option.addEventListener('click', function(e) { dropdownOptions.forEach(option => option.classList.remove('active')); handleOptionSelected(e); }); }); function handleOptionSelected(e) { const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.single-title.title'); titleElem.textContent = newValue; e.target.classList.add('active'); }

 .option::after { content: ' 'attr(class) }

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

Answer 2

將此添加到您的代碼中

function handleOptionSelected(e) {
    const newValue = e.target.textContent + ' ';
    const titleElem = document.querySelector('.single-title .title');
    titleElem.textContent = newValue;

    // Add this part
    const listElem = document.getElementsByClassName('option');
    listElem.forEach(el => {
        el.classList.remove('active'));
    };

    e.target.classList.add('active');
}

Answer 3

您必須迭代並刪除active的 class

 const dropdownOptions = document.querySelectorAll('.single-select.option'); dropdownOptions.forEach(option => option.addEventListener('click', handleOptionSelected)); function removeActive() { [...dropdownOptions].some(function(option) { // we are using.some assuming you have only 1 active class at any given time. If you think you will have multiple active classes, you can use.forEach instead of.some const hasClass = option.classList.contains('active'); if (hasClass) { option.classList.remove('active'); } return hasClass; }) } function handleOptionSelected(e) { const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.single-title.title'); titleElem.textContent = newValue; removeActive(); e.target.classList.add('active') }

 .active { color: green; }

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