当 class 转到 javascript 中的另一个元素时，从元素中删除 class

Question

如果您不理解标题，请先抱歉

我有一个包含元素的列表，一旦我单击一个项目，必须将“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>

Answer 1

您没有像要搜索 class 或 id 那样在querySelectorAll中定义选择器的类型。 在末尾而不是开头添加s class，因为在开头定义它也会从当前元素中删除s class。

此外，您可以在 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>

Answer 2

您根本不必运行循环。 首先，从前一个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>

Answer 3

你可以这样做

 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>

基本上首先我已经将 class 项目的背景颜色设置为白色，然后我将“这个”的背景设置为红色