[英]Add class to clicked element, but remove from others
I'm creating some elements using JS, and need to add a class to each item when clicked, but remove it from the non clicked items.我正在使用 JS 创建一些元素,并且需要在单击时将 class 添加到每个项目,但将其从未单击的项目中删除。 I'm sure this is a quick one, but I can't get my head around it.我敢肯定这是一个很快的,但我无法理解它。
let data = {
label:label,
somethingElse:"test",
id:id
};
sidebarOptions.push(data);
let ul = document.querySelector(".page-sidebar__options");
sidebarOptions.forEach(sidebarOption => {
let li = document.createElement('li'),
button = document.createElement('button'),
title = document.createElement('span'),
price = document.createElement('span')
ul.appendChild(li);
li.appendChild(button);
button.appendChild(title);
button.appendChild(price);
title.innerHTML = sidebarOption.label + sidebarOption.id;
price.innerHTML = '[Price]';
button.onclick = (event) => {
button.classList.add('selected');
};
})
So find if you have a selected button and remove the class所以找到你是否有一个选定的按钮并删除 class
const currentlySelected = ul.querySelector('button.selected');
if (currentlySelected) currentlySelected.classList.remove('selected');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.