模態不會為所有按鈕打開

Question

我正在為用戶單擊我的三個按鈕中的任何一個時創建一個模式，目前它僅適用於第一個按鈕，但是當我關閉模式並單擊另一個按鈕時，模式沒有打開，我不知道為什么. 無論我在關閉它后單擊了哪個按鈕，我怎樣才能使我的模式打開？

這是我的 html：

<div class="modal" id="modal">
                        <button id="close">X</button>
                        <h5>Modal</h5>
                      
                      </div>
                    <div class="column-container">
                        <div class="first-column">
                                <h3>Affiliate Manager</h3>
                                <br>
                                <p>
                                    If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
                                </p>
                            </div>
                                <div class="second-column">
                                   <button class="apply-btn jsModalTrigger open">APPLY NOW</button>
                              </div>
                              <div class="first-column">
                                <h3>Affiliate Manager</h3>
                                <br>
                                <p>
                                    If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
                                </p>
                            </div>
                                <div class="second-column">
                                   <button class="apply-btn jsModalTrigger open">APPLY NOW</button>
                              </div>
                              <div class="first-column">
                                <h3>Affiliate Manager</h3>
                                <br>
                                <p>
                                    If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us.
                                </p>
                            </div>
                                <div class="second-column">
                                   <button class="apply-btn jsModalTrigger open">APPLY NOW</button>
                              </div>

我的 css：

.modal {
    width: 300px;
    height: 150px;
    margin: auto auto;
    background: #34495e;
    display: none;
  }
  
  .modal button {
    right: 0;
    top: 0;
  }

和我的 javascript：

var btnOpen = document.querySelector(".open");
var btnClose = document.getElementById("close");
var modal = document.getElementById("modal");

btnOpen.onclick = function(){
  modal.style.display = "block";
}

btnClose.onclick = function(){
  modal.style.display = "none";
}

Answer 1

您只是獲得了 dom 中 className 為 open 的第一個元素。 改變這個：

var btnOpen = document.querySelector(".open"); 

到以下：

var btnsOpen = document.querySelectorAll(".open");

這將返回一個元素數組。

然后您必須遍歷該數組並添加事件

btnsOpen.forEach(btn=>{
      btn.onclick = function(){
      modal.style.display = "block";
    }
 })

 var btnsOpen = document.querySelectorAll(".open"); var btnClose = document.getElementById("close"); var modal = document.getElementById("modal"); btnsOpen.forEach(btn=>{ btn.onclick = function(){ modal.style.display = "block"; } }) btnClose.onclick = function(){ modal.style.display = "none"; }

 <div class="modal" id="modal"> <button id="close">X</button> <h5>Modal</h5> </div> <div class="column-container"> <div class="first-column"> <h3>Affiliate Manager</h3> <br> <p> If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us. </p> </div> <div class="second-column"> <button class="apply-btn jsModalTrigger open">APPLY NOW</button> </div> <div class="first-column"> <h3>Affiliate Manager</h3> <br> <p> If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us. </p> </div> <div class="second-column"> <button class="apply-btn jsModalTrigger open">APPLY NOW</button> </div> <div class="first-column"> <h3>Affiliate Manager</h3> <br> <p> If you are passionate about Affiliate marketing and searching for your next career achievement, please do not hesitate to contact us. </p> </div> <div class="second-column"> <button class="apply-btn jsModalTrigger open">APPLY NOW</button> </div>