Javascript总是从具有类似类的多个项中获取第一项
提问于 2021-02-21 09:02:22
我是JavaScript的初学者。我有五个(05) html div像这样：
<div class="ddmenu">
<a href="#"><i class="fa fas fa-cog"></i>Items<i
class="fa fa-chevron-right rotate float-end"> </i> </a>
<ul class="sub-links">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>一个css来旋转fa-chevron--就像这样：
.down{
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}由以下JavaScript处理：
var mainparentelements = document.querySelectorAll('.ddmenu');
for (let i = 0; i < mainparentelements.length; i++) {
mainparentelements[i].onclick = function() {
var toberotated = document.querySelector('.fa-chevron-right');
toberotated.classList.add("down");
};
}现在的问题是:无论我单击哪个主项目，它总是被旋转的第一个fa-chevron-right (当然)。如何将旋转操作和类绑定到每个个体，而不是仅绑定到一个？我在这里错过了什么？毫无头绪。任何阅读、指导或解决方案都将不胜感激。寻找友好的帮助使用css和纯香草Javascript只。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-21 09:04:22
引用要在循环中迭代的父元素，而不是使用querySelector，您可以从单击的父元素获得.fa子代：
mainparentelements[i].onclick = function () {
var toberotated = mainparentelements[i].querySelector('.fa-chevron-right');
toberotated.classList.add("down");
};您还可以通过调用迭代器来使代码更加简洁：
for (const parent of document.querySelectorAll('.ddmenu')) {
parent.onclick = () => {
parent.querySelector('.fa-chevron-right').classList.add("down");
};
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66304809
复制相关文章
腾讯云开发者
