針對同胞元素的孩子

Question

下面的代碼的目標fieldsets是兄弟姐妹，使得那些fieldsets可以當被啟用input buttons中的前一個被選擇：

document.querySelectorAll("fieldset").forEach(fieldset => {
  fieldset.addEventListener("change", function() {
    let nextFieldset = this.nextElementSibling

    while (nextFieldset && !nextFieldset.disabled) {
      nextFieldset = nextFieldset.nextElementSibling
    }

    if (nextFieldset) {
      nextFieldset.disabled = false
    }
  })
})

---

<form>
  <fieldset> … </fieldset>
  <fieldset> … </fieldset>
  <fieldset> … </fieldset>
</form>

如何定位單獨sections fieldsets ？

<form>
  <section><fieldset> … </fieldset></section>
  <section><fieldset> … </fieldset></section>
  <section><fieldset> … </fieldset></section>
</form>

Answer 1

這是完整的工作解決方案：

document.querySelectorAll("section").forEach(section => {
  section.addEventListener("change", function() {
    let nextFieldset = this.nextElementSibling.querySelector("fieldset")

    while (nextFieldset && !nextFieldset.disabled) {
      nextFieldset = nextFieldset.nextElementSibling
    }

    if (nextFieldset) {
      nextFieldset.disabled = false
    }
  })
})

Answer 2

我認為這將解決您的問題

    document.querySelectorAll("fieldset").forEach(fieldset => {
  fieldset.addEventListener("click", function() {
    let nextFieldParent = this.parentElement.nextElementSibling;
    let nextFieldset = nextFieldParent.firstElementChild;    
    while (nextFieldset && !nextFieldset.disabled) {
      nextFieldParent = this.parentElement.nextElementSibling;
    nextFieldset = nextFieldParent.firstElementChild;
    }

    if (nextFieldset) {
      nextFieldset.disabled = false
    }
  })
})