我想设置一个变量，该变量等于数组中被单击项的索引

Question

我对JS非常陌生，只是学习它的工作原理。我有12个div，其中每个是一个div.image，占整个div，然后是div.info和div.date。我正在尝试进行设置，以便当我单击div时，信息和日期会显示出来，而当我再次单击时，它们就会消失。我知道使用CSS可以更轻松地完成此操作，但我想使用JS来完成。

当前该功能仅适用于第一个div.info和div.date，因为我可以按如下所示预置功能。我想知道是否有办法获取我单击的div的索引。然后，不必为每个div创建函数，而是将其设置为clicked索引。

这是JavaScript代码：

<script>
    const panels = document.querySelectorAll('.panel');
    console.log(panels);
    const info = document.querySelectorAll('div.info');
    console.log(info);
    const date = document.querySelectorAll('div.date');
    console.log(date);

  function addInfo(){
    document.panels.addEventListener('click', index())

    if(info[0].style.display === 'none'){
      info[0].style.display = 'block'
    } else{
      info[0].style.display = 'none'}
  };

  function addDate(){
    if(date[0].style.display === 'none'){
      date[0].style.display = 'block'
    } else {
      date[0].style.display = 'none'
    }
  };

  document.getElementById("panel1").addEventListener("click", addInfo);
  document.getElementById("panel1").addEventListener("click", addDate);

</script>

Answer 1

编辑：您可以从click事件中获取元素，并且可以对所有元素重复使用此侦听器。

function addDate(e){
  const date = e.target
  if(date.style.display === 'none'){
    date.style.display = 'block'
  } else {
    date.style.display = 'none'
  }
};