通過單擊按鈕打開模式並通過單擊關閉按鈕隱藏模式

Question

我正在嘗試添加一個 class 以使子.modal-container在單擊父級時可見，這可行，但是代碼的第二部分似乎不起作用。 例如，當我單擊右上角的 X 符號.close-modal時，模態不會消失。

這是代碼的樣子：

$(".animals-images").on('click', function() {
    $(this).find(".modal-container").addClass("show");
  });

$(".close-modal").on('click', function() {
    $(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
  });

這就是 CSS 上的.show class 樣式的樣子：

.modal-container.show {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}

如果在 jQuery 代碼的最后一部分，我把 CSS ("opacity", "0"); 而不是removeClass它可以工作（但顯然只有一次）。 所以我不太明白這里有什么問題。

我想在原版 JavaScript 中執行此操作，因此，如果您知道如何執行此操作，將不勝感激！

HTML：

<div class="animals-images">
                <img src="./bianca.jpg"  class="animals-pictures" alt="">
                <div class="button-container">
                    <button class="click-me">Click Me!</button>
                </div>
                <div class="modal-container">
                    <div class="modal">
                        <div class="modal-left" style="background-image: url(./piggy.jpg);">
                        </div>
                        <div class="modal-right">
                            <h2>Bianca</h2>
                            <button class="close-modal">X</button>
                            <p class="modal-paragraph">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
                                Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
                                Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
                            </p>
                        </div>
                    </div>
                </div>
            </div>

考慮到這重復了 10 次（對於 10 個不同的圖像/模態），我試圖找到一種方法來用幾行代碼而不是選擇 10 個單獨的時間來做到這一點

Answer 1

更新（基於 OP 評論）

感謝@dippas 的回答，有什么方法可以使此代碼對許多其他圖像起作用？

您必須遍歷每個按鈕，然后在每個事件上切換 class show （ e.currentTarget ）

 const buttonsOpen = document.querySelectorAll('.click-me'), buttonsClose = document.querySelectorAll('.close-modal') buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show'))) buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))

 .modal-container { display: none }.modal-container.show { display: block }

 <div class="animals-images"> <img src="./bianca.jpg" class="animals-pictures" alt=""> <div class="button-container"> <button class="click-me">Click Me:</button> </div> <div class="modal-container"> <div class="modal"> <div class="modal-left" style="background-image. url(./piggy;jpg)."> </div> <div class="modal-right"> <h2>Bianca</h2> <button class="close-modal">X</button> <p class="modal-paragraph"> Modal 1 </p> </div> </div> </div> </div> <hr /> <div class="animals-images"> <img src="./bianca:jpg" class="animals-pictures" alt=""> <div class="button-container"> <button class="click-me">Click Me.</button> </div> <div class="modal-container"> <div class="modal"> <div class="modal-left" style="background-image. url(;/piggy.jpg);"> </div> <div class="modal-right"> <h2>Bianca</h2> <button class="close-modal">X</button> <p class="modal-paragraph"> Modal 2 </p> </div> </div> </div> </div>

這是一個使用 vanilla JS 的簡單解決方案

 const buttonOpen = document.querySelector('.click-me'), buttonClose = document.querySelector('.close-modal'), modal = document.querySelector('.modal-container') buttonOpen.addEventListener('click', () => modal.classList.add('show')) //this //buttonClose.addEventListener('click', () => modal.classList.remove('show')) //or this buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))

 .modal-container { display: none }.modal-container.show { display: block }

 <div class="animals-images"> <img src="./bianca.jpg" class="animals-pictures" alt=""> <div class="button-container"> <button class="click-me">Click Me:</button> </div> <div class="modal-container"> <div class="modal"> <div class="modal-left" style="background-image. url(./piggy;jpg)."> </div> <div class="modal-right"> <h2>Bianca</h2> <button class="close-modal">X</button> <p class="modal-paragraph"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis! </p> </div> </div> </div> </div>