Javascript 如何为每个div创建覆盖图

我正在尝试为rails迭代中的每一行创建覆盖

<% @inquiries.each do |inquiry| %>            
  <div class= "col-xs-12 col-sm-12 col-lg-12 col-md-12">
  </div>
<% end %>

对于每个查询，我想有一个按钮，当点击时，会显示一个覆盖图，上面有对该查询的详细评论

每项质询都有许多意见

可通过以下方式制作简单的覆盖层：

<div id="overlay">
  <div id="text">Overlay Text</div>
    <button onclick="off()">Turn off overlay</button>
   </div>     

   <div style="padding:20px">
     <h2>Overlay with Text</h2>
      <button onclick="on()">Turn on overlay effect</button>
  </div>  

<script>
function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
</script>

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 2;
    cursor: pointer;
}

#text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

覆盖文本
关闭覆盖
用文字覆盖
启用覆盖效果
关于（）的函数{
document.getElementById（“覆盖”）.style.display=“块”；
}
函数off（）{
document.getElementById（“覆盖”）.style.display=“无”；
}
#覆盖层{
位置：固定；
显示：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.8）；
z指数：2；
光标：指针；
}
#正文{
位置：绝对位置；
最高：50%；
左：50%；
字体大小：50px；
颜色：白色；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

但它使用id来识别相应的重叠。如果我使用类，就不会有任何标识，覆盖将产生干扰

我的问题是，如何为每个查询创建具有不同内容的独立覆盖，这意味着每个查询都有一个按钮，用于打开包含不同项目（查询注释）的覆盖。

在单击函数中将“this”作为参数传递，这将使您能够访问单击的当前元素。然后遍历函数中的参数以访问其父元素。例如：

<button onclick="on(this)">Turn on overlay effect</button>

function on(clickedElement) {

    clickedElement.parentElement.parentElement.style.display = "block";
}

启用覆盖效果
功能开启（单击元件）{
单击eElement.parentElement.parentElement.style.display=“块”；
}

---

希望这有帮助

多亏@grey.dim，我才知道方向。使用以下方法解决此问题：

<div class = "overlayparent">
  <div class="overlay">
    <div id="text">Overlay Text</div>
     <button onclick="off(this)" type="button" class = "btn btn-danger">Turn off overlay</button>
    </div>     

  <div>                        
    <button onclick="on(this)" type="button" class = "btn btn-danger">View/Add Comments</button>
   </div>                       
</div>

覆盖文本
关闭覆盖
查看/添加评论

对于我使用的javascript：

<script>
  function on(clickedElement) {
    clickedElement.parentElement.parentElement.getElementsByClassName("overlay")[0].style.display = "block";        
}

  function off(clickedElement) {
    clickedElement.parentElement.parentElement.getElementsByClassName("overlay")[0].style.display = "none";
}
</script>

功能开启（单击元件）{
单击eElement.parentElement.parentElement.getElementsByClassName（“覆盖”）[0].style.display=“块”；
}
功能关闭（单击“元素”）{
单击edElement.parentElement.parentElement.getElementsByClassName（“覆盖”）[0]。style.display=“无”；
}