多个按钮和模态

Question

我是JS的新手，虽然我已经买了一些书来开始正确学习，但我想知道是否有人可以提供这方面的建议？我有商店，列出了很多产品。在商店页面上，我在每个项目的底部添加了一个按钮，并且在单击按钮时需要执行操作。我已经应用了这段代码，它只能在第一个元素上运行 - 因为它基于id：

HTML：

<button id="myBtn" class="openmodal">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>

</div>

JS：

// Get the modal
 window.onload = function(){
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}};

我已经尝试更改JS来容纳这样的类名，但它不起作用：

// Get the modal
 window.onload = function(){
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("openmodal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}};

请有人帮忙吗？

提前致谢 克里斯

Answer 1

您应该使用classes代替ids，因为id必须是唯一的。

然后，您必须使用click方法为每个按钮绑定一个onclick事件处理程序。

<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
 <div class="modal myModal">

  <!-- Modal content -->
  <div class="modal-content">
  <span class="close">&times;</span>
  <p>Some text in the Modal..</p>
  </div>
</div>

JS

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
   btns[i].onclick = function() {
      modals[i].style.display = "block";
   }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
       modals[i].style.display = "none";
    }
 }

这是工作解决方案。

var modals = document.getElementsByClassName('modal');
// Get the button that opens the modal
var btns = document.getElementsByClassName("openmodal");
var spans=document.getElementsByClassName("close");
for(let i=0;i<btns.length;i++){
    btns[i].onclick = function() {
        modals[i].style.display = "block";
    }
}
for(let i=0;i<spans.length;i++){
    spans[i].onclick = function() {
        modals[i].style.display = "none";
    }
}

.modal{
  display:none;
}

<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal1</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal2</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal3</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal4</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal5</p>
</div>
</div>
<button class="openmodal myBtn">Open Modal</button>

<!-- The Modal -->
<div class="modal myModal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>Some text in the Modal6</p>
</div>
</div>