如何使手风琴不起作用并告诉我如果元素存在则无法读取未定义的属性 'classList'？

Question

这就是我目前的情况。此代码无法正常工作。

我需要这样做 - 如果我按下 header 元素部分必须消失，当我再次按下时它必须出现。我不明白为什么它告诉我该元素未定义，如果它存在于 HTML...中。有人能帮我解决这个问题吗？

var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');

for (var j = 0; j < filterTrigger.length; j++) {
  filterInputs[j].classList.add('filter-hidden');
  filterTrigger[j].addEventListener('click', function(evt) {
    evt.preventDefault();
    filterSection[j].classList.toggle('catalog__filter-section--opened');
    filterInputs[j].classList.toggle('filter-visible');
  });
}

.catalog__container {
  max-width: 1366px;
  margin: 0 auto;
}

.catalog__content-container {
  margin-left: 7.2%;
  margin-right: 7.2%;
  margin-top: 91px;
}

.catalog__filter-form {
  border: 1px solid brown;
  width: 248px;
}

.catalog__filter-form h3 {
  font-family: arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: black;
  margin: 0;
  padding-top: 22px;
  padding-bottom: 23px;
  padding-left: 24px;
}

.catalog__filter-section {
  padding-left: 24px;
  border-bottom: 1px solid brown;
  position: relative;
}

.catalog__filter-section::after {
  content: "";
  position: absolute;
  right: 22px;
  top: -38px;
  background-image: url("../img/arrow-down-icon.svg");
  background-repeat: no-repeat;
  width: 18px;
  height: 12px;
}

.catalog__filter-section--opened::after {
  background-image: url("../img/arrow-up-icon.svg")
}

.catalog__filter-section:last-child {
  border: none;
}

.catalog__filter-inputs {
  display: flex;
  flex-direction: column;
  display: flex;
  padding-bottom: 13px;
}

.catalog__filter-section label {
  font-family: arial;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: black;
  padding-left: 25px;
  position: relative;
  margin-bottom: 13px;
}

.catalog__filter-section input {
  appearance: none;
}

.catalog__filter-section input:checked+span {
  background-color: brown;
}

.catalog__filter-section span {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 2px;
  border: 1px solid brown;
  background-color: white;
}

.filter-hidden {
  display: none;
}

.filter-visible {
  display: flex;
}

<form class="catalog__filter-form">
  <h3>Product</h3>
  <div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
    <div class="catalog__filter-inputs filter-visible">
      <label>
        <input type="checkbox" name="products" value="Necklaces" checked>
        <span></span>
        Necklaces
      </label>
      <label>
        <input type="checkbox" name="products" value="Chokers" checked>
        <span></span>
        Chokers
      </label>
      <label>
        <input type="checkbox" name="products" value="Rings">
        <span></span>
        Rings
        </label>
        <label>
          <input type="checkbox" name="products" value="Earrings" checked>
          <span></span>
          Earrings
          </label>
    </div>
  </div>
  <h3>Material</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="material" value="Gold">
        <span></span>
        Gold
      </label>
      <label>
        <input type="checkbox" name="material" value="Silver">
        <span></span>
        Silver
      </label>
    </div>
  </div>
  <h3>Collection</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="collection" value="Pink flamingo">
        <span></span>
        Pink flamingo
      </label>
      <label>
        <input type="checkbox" name="collection" value="Dreams">
        <span></span>
        Dreams
      </label>
    </div>
  </div>
  <h3>Price</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="products" value="Necklaces">
        Necklaces
      </label>
    </div>
  </div>
</form>
</div>

Answer 1

这不是微不足道的，但你在这里

将触发器 class 添加到触发器 h3
加载时关闭所有
从容器中委托 div
添加一些缺失的 html（跨越到最后一个复选框）

var filterSections = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
const closeAll = () => {
  filterInputs.forEach((inp, i) => inp.classList.add('filter-hidden'));
  filterSections.forEach((section, i) => section.classList.remove('catalog__filter-section--opened'));
}
closeAll()
document.getElementById("container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (!tgt.classList.contains("trigger")) return
  const filterSection = tgt.nextElementSibling;
  const filterInput = filterSection.querySelector(".catalog__filter-inputs");
  closeAll();
  filterSection.classList.toggle('catalog__filter-section--opened');
  filterInput.classList.toggle('filter-visible');
});

.catalog__container {
  max-width: 1366px;
  margin: 0 auto;
}

.catalog__content-container {
  margin-left: 7.2%;
  margin-right: 7.2%;
  margin-top: 91px;
}

.catalog__filter-form {
  border: 1px solid brown;
  width: 248px;
}

.catalog__filter-form h3 {
  font-family: arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: black;
  margin: 0;
  padding-top: 22px;
  padding-bottom: 23px;
  padding-left: 24px;
}

.catalog__filter-section {
  padding-left: 24px;
  border-bottom: 1px solid brown;
  position: relative;
}

.catalog__filter-section::after {
  content: "";
  position: absolute;
  right: 22px;
  top: -38px;
  background-image: url("../img/arrow-down-icon.svg");
  background-repeat: no-repeat;
  width: 18px;
  height: 12px;
}

.catalog__filter-section--opened::after {
  background-image: url("../img/arrow-up-icon.svg")
}

.catalog__filter-section:last-child {
  border: none;
}

.catalog__filter-inputs {
  display: flex;
  flex-direction: column;
  display: flex;
  padding-bottom: 13px;
}

.catalog__filter-section label {
  font-family: arial;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: black;
  padding-left: 25px;
  position: relative;
  margin-bottom: 13px;
}

.catalog__filter-section input {
  appearance: none;
}

.catalog__filter-section input:checked+span {
  background-color: brown;
}

.catalog__filter-section span {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 2px;
  border: 1px solid brown;
  background-color: white;
}

.filter-hidden {
  display: none;
}

.filter-visible {
  display: flex;
}

<div id="container">
  <form class="catalog__filter-form">
    <h3>Product</h3>
    <div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
      <div class="catalog__filter-inputs filter-visible">
        <label>
        <input type="checkbox" name="products" value="Necklaces" checked>
        <span></span>
        Necklaces
      </label>
        <label>
        <input type="checkbox" name="products" value="Chokers" checked>
        <span></span>
        Chokers
      </label>
        <label>
        <input type="checkbox" name="products" value="Rings">
        <span></span>
        Rings
        </label>
        <label>
        <input type="checkbox" name="products" value="Earrings" checked>
        <span></span>
        Earrings
        </label>
      </div>
    </div>
    <h3 class="trigger">Material</h3>
    <div class="catalog__filter-section" tabindex="0">
      <div class="catalog__filter-inputs">
        <label>
        <input type="checkbox" name="material" value="Gold">
        <span></span>
        Gold
      </label>
        <label>
        <input type="checkbox" name="material" value="Silver">
        <span></span>
        Silver
      </label>
      </div>
    </div>
    <h3 class="trigger">Collection</h3>
    <div class="catalog__filter-section" tabindex="0">
      <div class="catalog__filter-inputs">
        <label>
        <input type="checkbox" name="collection" value="Pink flamingo">
        <span></span>
        Pink flamingo
      </label>
        <label>
        <input type="checkbox" name="collection" value="Dreams">
        <span></span>
        Dreams
      </label>
      </div>
    </div>
    <h3 class="trigger">Price</h3>
    <div class="catalog__filter-section" tabindex="0">
      <div class="catalog__filter-inputs">
        <label>
        <input type="checkbox" name="products" value="Necklaces">
        <span></span>
        Necklaces
      </label>
      </div>
    </div>
  </form>
</div>

Answer 2

因为函数运行当你点击 h3 隐藏子节点时，j 将为 4。

你最常创建一个 const 变量并在其中存储元素。

var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');

function onClick(event, secEl, inpEl){
    event.preventDefault();
    secEl.classList.toggle('catalog__filter-section--opened');
    inpEl.classList.toggle('filter-visible');
  }

for (var j = 0; j < filterTrigger.length; j++) {
  const secEl = filterSection[j]
  const inpEl = filterInputs[j]
  filterInputs[j].classList.add('filter-hidden');
  filterTrigger[j].addEventListener('click', function(e){ onClick(e, secEl, inpEl) });
}

.catalog__container {
  max-width: 1366px;
  margin: 0 auto;
}

.catalog__content-container {
  margin-left: 7.2%;
  margin-right: 7.2%;
  margin-top: 91px;
}

.catalog__filter-form {
  border: 1px solid brown;
  width: 248px;
}

.catalog__filter-form h3 {
  font-family: arial;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: black;
  margin: 0;
  padding-top: 22px;
  padding-bottom: 23px;
  padding-left: 24px;
}

.catalog__filter-section {
  padding-left: 24px;
  border-bottom: 1px solid brown;
  position: relative;
}

.catalog__filter-section::after {
  content: "";
  position: absolute;
  right: 22px;
  top: -38px;
  background-image: url("../img/arrow-down-icon.svg");
  background-repeat: no-repeat;
  width: 18px;
  height: 12px;
}

.catalog__filter-section--opened::after {
  background-image: url("../img/arrow-up-icon.svg")
}

.catalog__filter-section:last-child {
  border: none;
}

.catalog__filter-inputs {
  display: flex;
  flex-direction: column;
  display: flex;
  padding-bottom: 13px;
}

.catalog__filter-section label {
  font-family: arial;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: black;
  padding-left: 25px;
  position: relative;
  margin-bottom: 13px;
}

.catalog__filter-section input {
  appearance: none;
}

.catalog__filter-section input:checked+span {
  background-color: brown;
}

.catalog__filter-section span {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 10px;
  top: 2px;
  border: 1px solid brown;
  background-color: white;
}

.filter-hidden {
  display: none;
}

.filter-visible {
  display: flex;
}

<form class="catalog__filter-form">
  <h3>Product</h3>
  <div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
    <div class="catalog__filter-inputs filter-visible">
      <label>
        <input type="checkbox" name="products" value="Necklaces" checked>
        <span></span>
        Necklaces
      </label>
      <label>
        <input type="checkbox" name="products" value="Chokers" checked>
        <span></span>
        Chokers
      </label>
      <label>
        <input type="checkbox" name="products" value="Rings">
        <span></span>
        Rings
        </label>
        <label>
          <input type="checkbox" name="products" value="Earrings" checked>
          <span></span>
          Earrings
          </label>
    </div>
  </div>
  <h3>Material</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="material" value="Gold">
        <span></span>
        Gold
      </label>
      <label>
        <input type="checkbox" name="material" value="Silver">
        <span></span>
        Silver
      </label>
    </div>
  </div>
  <h3>Collection</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="collection" value="Pink flamingo">
        <span></span>
        Pink flamingo
      </label>
      <label>
        <input type="checkbox" name="collection" value="Dreams">
        <span></span>
        Dreams
      </label>
    </div>
  </div>
  <h3>Price</h3>
  <div class="catalog__filter-section" tabindex="0">
    <div class="catalog__filter-inputs">
      <label>
        <input type="checkbox" name="products" value="Necklaces">
        Necklaces
      </label>
    </div>
  </div>
</form>
</div>

如何使手风琴不起作用并告诉我如果元素存在则无法读取未定义的属性 'classList'？

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

html

javascript

undefined

如何使手风琴不起作用并告诉我如果元素存在则无法读取未定义的 属性 'classList'？

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

html

javascript

undefined

如何使手风琴不起作用并告诉我如果元素存在则无法读取未定义的属性 'classList'？