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

Question

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

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

这里是 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

已编辑：您可以从点击事件中获取元素，并且可以为所有元素重用此侦听器。

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

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

I want to set a variable equal to the index of the clicked item in an array

javascript

indexof