为什么 document.querySelectorAll 在这种情况下返回一个空数组？答案

【问题标题】：Why does document.querySelectorAll return an empty array in this context?为什么 document.querySelectorAll 在这种情况下返回一个空数组？
【发布时间】：2020-06-22 23:29:36
【问题描述】：

我有以下一组 HTML 元素

类options的无序列表在页面加载时不显示：

我想在点击元素<div class="select-box"> 时显示它。为此，我有：

不知道为什么，位console.log(selectBox)返回一个空数组。

我该如何解决这个问题？

/* Select Boxes */
function selectBoxToggle() {
  let selectBox = document.querySelectorAll('.select-box');
  console.log(selectBox);
  selectBox.forEach(function(item) {
    let options = item.querySelectorAll('.options');
    item.addEventListener("click", options.style.display = 'block');
    console.log(options);
  });
}

// On document load
document.addEventListener("DOMContentLoaded", function() {
  selectBoxToggle();
});

.select-box {
  position: relative;
}

.select-box .caret {
  position: absolute;
  right: 1px;
  top: 50%;
  color: #999;
  transform: translateY(-50%);
}

.select-box .selected-value {
  height: 33px;
  line-height: 32px;
  border-bottom: 1px solid #ccc;
}

.select-box .options {
  display: none;
  position: absolute;
  min-width: 100%;
  background: #fff;
  z-index: 99;
  left: 0;
  top: 33px;
  margin-top: 1px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
  <div class="selected-value">Item 1</div>
  <ul class="options elevation-1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <span class="material-icons caret">arrow_drop_down</span>
</div>

【问题讨论】：

而不是this.querySelectorAll('.options'); 使用item.querySelectorAll('.options');
如果你使用strict mode，这样的问题会抛出错误。
但问题不在于 .options 选择器。那个 HTML 真的是最初在页面上而不是动态添加的吗？
@GuyIncognito 不是动态添加的。
那么问题出在您没有显示的其他地方，因为该代码可以正常工作（就 .select-box 选择器而言），如果您运行代码 sn-p 则可以看到.

标签： javascript jquery-selectors

【解决方案1】：

你可能想要切换一个类

/* Select Boxes */
const selectBoxToggle = () => {
  document.querySelector('.select-box').addEventListener("click",function() { // now you can use "this"
    this.querySelector('.options').classList.toggle("hide")
  });
}

// On document load
window.addEventListener("load",selectBoxToggle);

.select-box {
  position: relative;
}

.select-box .caret {
  position: absolute;
  right: 1px;
  top: 50%;
  color: #999;
  transform: translateY(-50%);
}

.select-box .selected-value {
  height: 33px;
  line-height: 32px;
  border-bottom: 1px solid #ccc;
}

.select-box .options {
  position: absolute;
  min-width: 100%;
  background: #fff;
  z-index: 99;
  left: 0;
  top: 33px;
  margin-top: 1px;
}

.hide { display:none }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="select-box">
  <div class="selected-value">Items</div>
  <ul class="options elevation-1 hide">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <span class="material-icons caret">arrow_drop_down</span>
</div>

【讨论】：

代码是 Svelte 项目的一部分这一事实可能是导致这个奇怪问题的原因。
啊，不知道苗条

【解决方案2】：

你有没有尝试把 li 而不是 options？

【讨论】：