在循环内单击按钮时更改 div 样式

Question

所以我在 PHP 中使用 While 循环从我的数据库返回结果。基本上每个图像上都有一个按钮，当单击该按钮时，我想显示 mapOverlay div，它上面会有一个地图。如何仅选择与我单击的按钮相关的 div？我可以用我点击的按钮打开它们，或者只打开第一个，但不能打开确切的那个。

此代码位于 echo 标记中，但为了便于阅读，我已将其删除：

<div class="resultContainer">
    <div class="mapOverlay animated slideInLeft"></div>
    <div class="resultsInfo">
        <div class='resultsInfo_user'>
            <div class='results_dp' style='background-image:url($row[dp])'></div>
            <p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>ucfirst($row[firstName])</p>
        </div>
    </div>
    <div class='resultsImage' style='background-image: url($row[image])'>
        <div class='resultsImage_overlay'>
            <div class='resultsImage_overlay_info'>
                <p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>$row[title]</p>
                <p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>$distanceMiles</p>
                <p style='margin:0;font-size:0.9em;color:#828282'>$row[expiry]</p>
            </div>
            <div class='resultsImage_overlay_button'>
                <button class='button-green openMap'>Get Directions</button>
            </div>
        </div>
    </div>
</div>

这是我的 javascript：

var button = document.getElementsByClassName("openMap")

for(var i = 0; i < button.length; i++){
    button[i].addEventListener("click", function(){
        var overlay = document.getElementsByClassName("mapOverlay")

        overlay.style.display = "block"
    })
}

当我开始工作时，我将切换一个类，但只是使用 style.display 让它首先工作，以便于测试。我还希望 resultsImage_overlay 显示在叠加层上方，以便按钮保持可见/能够再次关闭 div 叠加层。

我希望在这里指出正确的方向，欢迎提供完整的解决方案，但我很感激我没有提供所有的块！

Answer 1

您可以尝试在this 对象上使用closest() 和previousElementSibling。

演示：

var button = document.getElementsByClassName("openMap")
  for(var i = 0; i < button.length; i++){
  button[i].addEventListener("click", function(){
    var overlay = this.closest('.resultsImage').previousElementSibling.previousElementSibling;
    overlay.style.display = "block"
  })
}

.mapOverlay {display: none}

<div class="resultContainer">
    <div class="mapOverlay animated slideInLeft">mapOverlay 1</div>
    <div class="resultsInfo">
        <div class='resultsInfo_user'>
            <div class='results_dp' style='background-image:url($row[dp])'></div>
            <p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>John</p>
        </div>
    </div>
    <div class='resultsImage' style='background-image: url($row[image])'>
        <div class='resultsImage_overlay'>
            <div class='resultsImage_overlay_info'>
                <p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title</p>
                <p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>50</p>
                <p style='margin:0;font-size:0.9em;color:#828282'>12-12-2020</p>
            </div>
            <div class='resultsImage_overlay_button'>
                <button class='button-green openMap'>Get Directions</button>
            </div>
        </div>
    </div>
    
    <div class="mapOverlay animated slideInLeft">mapOverlay 2</div>
    <div class="resultsInfo">
        <div class='resultsInfo_user'>
            <div class='results_dp' style='background-image:url($row[dp])'></div>
            <p style='color:#565656;padding: 0px 10px 0px 10px;float: left;font-weight:600'>Michael</p>
        </div>
    </div>
    <div class='resultsImage' style='background-image: url($row[image])'>
        <div class='resultsImage_overlay'>
            <div class='resultsImage_overlay_info'>
                <p style='font-size:1.1em;font-weight:600;color:#4A4A4A;margin:0'>Some Title 2</p>
                <p style='margin: 5px 0px 1px 0px;font-size:0.9em;color:#828282'>40</p>
                <p style='margin:0;font-size:0.9em;color:#828282'>11-11-2020</p>
            </div>
            <div class='resultsImage_overlay_button'>
                <button class='button-green openMap'>Get Directions</button>
            </div>
        </div>
    </div>
</div>