javascript - 分别显示/隐藏通过 while 循环生成的 DIV 元素

Question

我一直在查看以前的论坛，我知道类似的问题，但我未能找到我到底需要什么。简而言之，我有一个 while 循环，这个 while 循环根据特定表中存在的记录数量生成隐藏/显示 div 元素。我想要实现的是让用户能够单独访问每个 div。

这是正在使用的脚本文件:

<script type="text/javascript">
 function show()   
 {

     var x=document.getElementById('woupdate7');
     if(x.style.display==='none')
     {
        x.style.display='block';
     }
    else
     {
        x.style.display='none'; 
     }

 }
</script>

那么php代码如下:

$woeditquery="SELECT * FROM 3pxwotc_tb where woid='$worderindex' and 
wosct<>''";
$woeditresult=mysqli_query($con6,$woeditquery);
while($woeditrecord2=mysqli_fetch_array($woeditresult))
{
echo "<div id='woupdate6'>";
echo"<label><img src='images/darrow.png' style='padding-left:3px;padding-
top:3px; width: 20px; height: 20px; margin:0' 
onclick='show()'>Details:</label>";
echo"</div>";
 //===================================================================

echo"<div id='woupdate7' style='display:none'>";
echo"<br><textarea name='reason' id='adres' rows='3' 
cols='135'placeholder='Enter Details'></textarea><br>";
echo"</div>";
}

上面的代码只会显示第一个隐藏/显示 div 元素，这是正确的，因为我只是通过相同的 ID 名称指定相同的 div/元素。

我将java代码更改如下，将ID替换为CLASS:

function show()   
 {

     var x=document.getElementsByClassName("woupdate7");
     n = x.length;
     for (var i = 0; i < n; i++) 
     {
     var e = x[i];
         if(e.style.display==='none')
     {
         e.style.display='block';
     }
     else
     {
        e.style.display='none'; 
     }

 }
</script>

然后在我的 php 代码中更改为 .class。此代码同时显示/隐藏元素，这也不是我想要的。

有人可以告诉我如何在集合中实现单独的显示/隐藏元素吗？我将不胜感激。

我知道它需要什么，在某种程度上我需要索引每个单独的隐藏/显示元素，问题是我不知道它是如何实现的。

一如既往地感谢您。

Answer 1

不确定这是否是您所需要的，但无论如何......这会切换每个单独项目的详细信息

[].slice.call(document.querySelectorAll('.toggleDetails')).forEach(function(e){e.onclick = function(){
	this.parentElement.querySelector('.details').classList.toggle('hidden')
}})

.item{
  margin:5px;
  border:1px solid #efefef;
  padding:5px;
}
.hidden{
  display:none;
}

<div class="item">
  <div class="title">Item 1</div>
  <div class="details hidden">
    Edit Details
    <input name="details" />
  </div>
  <span class="toggleDetails">Details</span>
</div>
<div class="item">
  <div class="title">Item 2</div>
  <div class="details hidden">
    Edit Details
    <input name="details" />
  </div>
  <span class="toggleDetails">Details</span>
</div>