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

Question

我正在創建一個切換評論表單，當您點擊編輯時會顯示該表單，但我只希望它適用於按鈕是其兄弟的評論，而不是頁面上的所有評論編輯 forms（因為可能有多個） .

我知道如何在 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')
};

我想我可以使用 nextSibling（因為它目前是下一個兄弟），但更喜歡一個不會破壞代碼的解決方案，如果更改訂單 / html。

謝謝！

Answer 1

@Mike您可以嘗試創建一個使用while循環來跟蹤兄弟姐妹的function，我希望這會有所幫助

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;

};