在循環內單擊按鈕時更改 div 樣式

Question

所以我在 PHP 中使用 While 循環從我的數據庫返回結果。 基本上每個圖像都有一個按鈕，當單擊該按鈕時，我想顯示 mapOverlay div，它上面將有一個 map。 我如何 select 僅與我單擊的按鈕相關的 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"
    })
}

當我讓它工作時，我將切換 class，但只是使用 style.display 讓它首先工作以方便測試。 我還希望 resultsImage_overlay 顯示在疊加層上方，以便按鈕保持可見/能夠再次關閉 div 疊加層。

我希望在這里指出正確的方向，歡迎完整的解決方案，但我很感激我沒有提供所有的塊！

Answer 1

您可以在this object 上嘗試使用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>