原生JS开发手风琴时箭头旋转仅首行生效问题求助

核心问题 #

• 全局调用document.querySelector()查询元素时，方法默认仅返回整个文档中第一个匹配的元素，无论点击哪一行，操作的永远是第一行的箭头和内容元素
• 类名切换的目标错误，直接给触发点击的子元素（如文本所在列）加类，没有作用到实际需要修改的箭头、内容元素

修正代码 #

JS逻辑 #

var myDiv = document.getElementsByClassName("row");

for (var i = 0; i < myDiv.length; i++) {
    myDiv[i].addEventListener("click", function (event) {
        // 从当前点击的行内部查询元素，仅操作当前行的对应节点
        let toggleAble = this.querySelector(".fa-arrow-up");
        let cheese = this.querySelector(".cheese");
        // 给对应元素切换类名
        cheese.classList.toggle("yello");
        toggleAble.classList.toggle("arrow-down");
    });
}

可选CSS补充（如果缺少过渡和旋转规则可直接使用） #

.fa-arrow-up {
  transition: transform 0.3s ease;
}
.arrow-down {
  transform: rotate(180deg);
}
.yello {
  background: yellow;
}

内容的提问来源于stack exchange，提问作者Alex Jefferis