具有不同ID的第二个模式以不同的效果打开-为什么？ 基本

Question

我有两种不同的定价卡：

    <div class="card card1" id="open">
      <span class=title>Basic</span>
      <h1>$99 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Access to AM</li>
        <li>Unlimited Households</li>
        <li>White-Labeling</li>
      </ul>
    </div>

    <div class="card card2" id="open2">
      <span class=title>Pro</span>
      <h1>$129 USD</h1>
      <h4>Lorem ipsum dolor sit amet.</h4>
      <h2>YOU GET:</h2>
      <ul>
        <li>Cash-Flow Reporting</li>
        <li>Beneficiary Visualization</li>
        <li>Unlimited TMs</li>
      </ul>
    </div>

单击时，每个都应调出不同的模式：

    <div class="modal-container" id="modal_container">
      <div class="modal">
        <h1>Modal goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close">Close me</button>
      </div>

      <div class="modal-container" id="modal_container2">
      <div class="modal">
        <h1>Modal 2 goes here</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
        <button id="close2">Close me</button>
      </div>

所有ID都是唯一的。使用此JS，我可以调出第一个模式，但不能调出第二个：

const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');

open.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

我为第二张卡和模式添加了唯一的ID，但是当我通过添加以下代码将它们拉入JS时：

const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');

open2.addEventListener('click', () => {
  modal_container2.classList.add('show');
});

close2.addEventListener('click', () => {
  modal_container2.classList.remove('show');
});

我没有得到相同的效果。这是相关的CSS：已添加相关的CSS

.modal-container {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.modal-container.show {
  opacity: 1;
  pointer-events: auto;
}

Answer 1

您的代码笔出错，请尝试以下操作：