我在 HTMLLIElement.<anonymous> 处收到未定义的“无法读取属性“切换”

Question

谁能帮忙

我有一个项目列表，当我单击每个名称时，我想显示正在单击的项目的数据。

但我收到错误Uncaught TypeError: Cannot read property 'toggle' of undefined at HTMLLIElement.<anonymous>

如果我将forEach 应用于n.addEventListener('click'... 内的data，它可以正常工作，但它会显示所有列表的所有data，而不仅仅是我单击的那个。

这是代码：

const name = document.querySelectorAll('.name')
const data = document.querySelectorAll('.data')

name.forEach(n => {
  n.addEventListener('click', () => {
    data.classList.toggle('show')
  })
})

.data {
  display: none;
}

.show {
  display: block;
}

<ul class="list">
  <li class="name">
    <h3>Jack</h3>
    <div class="data">
      <span>Age: 18</span>
    </div>
  </li>
  <li class="name">
    <h3>Mike</h3>
    <div class="data">
      <span>Age: 19</span>
    </div>
  </li>
  <li class="name">
    <h3>Greg</h3>
    <div class="data">
      <span>Age: 17</span>
    </div>
  </li>
</ul>

Answer 1

请在下面找到解决方案。您还需要注意性能。在每个 <li> 上绑定事件不是一个好方法。我们可以在这里利用事件委托的概念。

document.querySelector('.list').addEventListener('click', function (event) {
    const target = event.target;
    if (target.classList.contains('name')) {
        target.querySelector('.data').classList.toggle('show');
        return;
    }
    
    if(target.tagName.toLowerCase() === 'h3'){
    const parentLi = target.closest('li')
    parentLi.querySelector('.data').classList.toggle('show');
    }
})

Answer 2

您正在使用返回多个元素的querySelectorAll，然后尝试使用作为单个元素的属性的classList。您还需要遍历每个 .data 元素并在其上调用 classList：

name.forEach(n => {
    data.forEach(d => {
        n.addEventListener('click', () => {
            d.classList.toggle('show');
        });
    });
});

除非您希望所有 .data 元素在点击时切换它们的 show，在这种情况下您需要反转函数的嵌套：

name.forEach(n => {
    n.addEventListener('click', () => {
        data.forEach(d => {
            d.classList.toggle('show');
        });
    });
});