按钮单击打开错误的 div

Question

我有以下 html 用于 3 个下拉清单（单击锚跨度以使未编号列表可见）

for (var checkList of document.querySelectorAll('.dropdown-check-list')) { 
   checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
   if (checkList.classList.contains('visible'))
      checkList.classList.remove('visible');
   else
      checkList.classList.add('visible');
   }
}

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  margin-top: 6px;
  width: 357px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}   
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list.visible .items {
  display: block;
}

<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Expired Metadata<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list2" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Groups<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list3" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Teams<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

但是，当我单击任何锚点跨度时，它只会打开最后一个列表 (div.list3)。跨度不对应于正确的列表。有没有办法解决这个问题？

Answer 1

checkList 是 var 在第一次迭代后不会保持不变，但是，您希望成为 另一个范围 中使用的局部常量变量（包装在函数，在点击时执行）。

您必须将变量更改为 let 类型，因此，在局部范围内，或者在迭代中创建另一个变量以将其保留在内存中。

for (let checkList of document.querySelectorAll('.dropdown-check-list')) { 
   checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
   if (checkList.classList.contains('visible'))
      checkList.classList.remove('visible');
   else
      checkList.classList.add('visible');
   }
}

.dropdown-check-list {
  display: inline-block;
}
.dropdown-check-list .anchor {
  margin-top: 6px;
  width: 357px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}   
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list.visible .items {
  display: block;
}

<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Expired Metadata<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list2" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Groups<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list3" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Teams<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

Answer 2

首先： 在循环中声明的函数包含对“checkList”变量的不安全引用...您可以在此处阅读更多信息： Function declared contains unsafe references

其次： 当您使用 var 关键字定义变量时，第一次迭代后它不会保持不变...应该使用 let

第三： 或者您可以将此 sn-p 用于 JS 部分，它没有这些问题：

document.querySelectorAll('.dropdown-check-list').forEach(item => {
    item.addEventListener('click', event => {
       if (item.classList.contains('visible')){
      item.classList.remove('visible');
       }
   else{
     item.classList.add('visible');
   }
  }
)
})

Answer 3

试试下面这个 sn-p。

document.querySelectorAll('.dropdown-check-list').forEach(el => el.addEventListener('click', evt => {
  evt.currentTarget.classList.toggle('visible');
}))

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  margin-top: 6px;
  width: 357px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list.visible .items {
  display: block;
}

<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Expired Metadata<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list2" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Groups<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>

<div id="list3" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Unregistered Teams<span class="count">20</span></span>
  <ul class="items"> ... </ul>
</div>