[英]removing class from element when the class goes to another one in javascript
first sorry if you don't understand the title如果您不理解标题,请先抱歉
I have a list that contains elements once I click on an item, "s" class must be added to it and removed from others I try to remove by loop but didn't work我有一个包含元素的列表,一旦我单击一个项目,必须将“s”class 添加到其中并从其他人中删除我尝试通过循环删除但没有用
function selectIt(x) { x.classList.add('s'); var items = document.querySelectorAll('item'); for (i = 0; i < items.length; i++) { items[i].classList.remove('s'); } }
.s { background: red; }
<div class="list"> <div class="item" onclick="selectIt(this)">item 1</div> <div class="item s" onclick="selectIt(this)">item 2</div> <div class="item" onclick="selectIt(this)">item 3</div> <div class="item" onclick="selectIt(this)">item 4</div> <div class="item" onclick="selectIt(this)">item 5</div> </div>
You are not defining the type of selector in querySelectorAll
like you want to search for a class or id.您没有像要搜索 class 或 id 那样在querySelectorAll
中定义选择器的类型。 Add the s
class at the end and not in the beginning, as defining it in the start will remove the s
class from the current element also.在末尾而不是开头添加s
class,因为在开头定义它也会从当前元素中删除s
class。
Also, you can search for s
class in the querySelector instead of searching for item.此外,您可以在 querySelector 中搜索s
class 而不是搜索项目。
function selectIt(x) { var items = document.querySelectorAll('.s'); for (i = 0; i < items.length; i++) { items[i].classList.remove('s'); } x.classList.add('s'); }
.s { background: red; }
<div class="list"> <div class="item" onclick="selectIt(this)">item 1</div> <div class="item s" onclick="selectIt(this)">item 2</div> <div class="item" onclick="selectIt(this)">item 3</div> <div class="item" onclick="selectIt(this)">item 4</div> <div class="item" onclick="selectIt(this)">item 5</div> </div>
You don't have to run a loop at all.您根本不必运行循环。 First, remove the class s
from the previous div
element and add it to the new div
element which is clicked.首先,从前一个div
元素中删除s
并将其添加到单击的新div
元素中。
function selectIt(x) { let item = document.querySelector('.s'); item.classList.remove('s') x.classList.add('s'); }
.s { background: red; }
<div class="list"> <div class="item" onclick="selectIt(this)">item 1</div> <div class="item s" onclick="selectIt(this)">item 2</div> <div class="item" onclick="selectIt(this)">item 3</div> <div class="item" onclick="selectIt(this)">item 4</div> <div class="item" onclick="selectIt(this)">item 5</div> </div>
You can do this like this你可以这样做
function selectIt(x) { var elements = document.getElementsByClassName('item'); for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = 'white'; } x.style.backgroundColor = "red" }
<div class="list"> <div class="item" onclick="selectIt(this)">item 1</div> <div class="item" onclick="selectIt(this)">item 2</div> <div class="item" onclick="selectIt(this)">item 3</div> <div class="item" onclick="selectIt(this)">item 4</div> <div class="item" onclick="selectIt(this)">item 5</div> </div>
Basically first i have made background color of class item = white then i have made background of "this" red基本上首先我已经将 class 项目的背景颜色设置为白色,然后我将“这个”的背景设置为红色
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.