[英]Vanilla JS remove class from previous selection
Im working with this part of code我正在使用这部分代码
<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')
}
Everytime when i choose option JS should add to class list class 'active'.每次当我选择选项 JS 时,应该添加到 class 列表 class '活动'。 The point is that only single option can have this class on it.关键是只有一个选项可以有这个 class 。 Can someone help me how to remove it everytime when i choose other option?每当我选择其他选项时,有人可以帮我如何删除它吗?
Wrap the callback in an anonymous function:将回调包装在匿名 function 中:
//... option.addEventListener('click', function(e) { handleOptionSelected(e); }); //...
Then add a the following before the callback:然后在回调之前添加以下内容:
//... //option.addEventListener('click', function(e) { dropdownOptions.forEach(option => option.classList.remove('active')); // handleOptionSelected(e); //}); //...
Now whenever the user clicks an option, all options will remove the class .active
-- then the callback handleOptionSelected()
will add .active
to the clicked option.现在,每当用户单击一个选项时,所有选项都会删除 class .active
- 然后回调handleOptionSelected()
会将.active
添加到单击的选项。
Note: A CSS pseudo-element was added to demonstrate that there is only one .option.active
at a time.注意:添加了一个 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>
Add this to your code将此添加到您的代码中
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');
}
You have to iterate and remove the active
class您必须迭代并删除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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.