如何在原版 javascript 中定位兄弟姐妹?

Question

我正在创建一个切换审阅表单，当您点击编辑时会显示该表单，但我只希望它适用于按钮是同级的审阅，而不是页面上的所有审阅编辑表单(因为可能有多个(。

我知道如何在jquery中做到这一点，但我试图保持这个项目都是香草js。

const button = document.querySelector('.toggle-edit-form');
const form = document.querySelector('.edit-review-form');
button.onclick = function() {
// toggle the edit button text on click
button.innerHTML === 'Edit' ? button.innerHTML = "Cancel" : button.innerHTML = "Edit";
// toggle visibility of edit review form
form.classList.toggle('toggle')
};

我想我可以使用下一个兄弟姐妹(因为它目前是下一个兄弟姐妹(，但更喜欢一个在更改顺序/html时不会破坏代码的解决方案。

谢谢！

Answer 1

@Mike您可以尝试创建一个使用 while 循环来跟踪兄弟姐妹的函数，希望这有所帮助

var getSiblings = function (elem) {
// Setup siblings array and get the first sibling
var siblings = [];
var sibling = elem.parentNode.firstChild;
// Loop through each sibling and push to the array
while (sibling) {
if (sibling.nodeType === 1 && sibling !== elem) {
siblings.push(sibling);
}
sibling = sibling.nextSibling
}
return siblings;
};