弹出模式仅适用于数组中的第一个按钮

Question

我正在尝试为我正在设计的房地产网站实现一个弹出模式。当您进入“代理”页面时，每个代理都有自己的个人简历和“联系人”卡。选择联系人卡片时，将显示一个弹出模式，背景为灰色。我设法实现了modal，但它只适用于9数组中的第一个按钮。我知道这与唯一ID有关，但我不完全确定如何执行它。任何建议都会有所帮助。

• J. 哈特

// Agent bio:

<section>

        <div class="row">

            <div class="column">

              <div class="cardB">                    

                    <img src="https://i.imgur.com/H8By9Ns.jpg" alt="Pondra Bowen" class="center-cardB" style="width:300px;height:300px;">

                <div class="container">

               "Agent's personal information redacted"

    <p><button id="myBtn" class="rounded">Contact</button></p>

                 </div>

              </div>

            </div>

        </div>

<section>

// The modal

<div id="myModal" class="modal">

  // Modal Content

  <div class="modal-content">

    <span class="close">&times;</span>

    <div class="flex">

        <div id="form-container">

            <h3>Contact Form</h3>

            <form>

                <label for="name">Name</label>

                <input type="text" id="name" />

                <label for="email">Email</label>

                <input type="text" id="email" />

                <label for="subject">Subject</label>

                <input type="text" id="subject" />

                <label for="message">Message</label>

                <textarea id="message" placeholder="Write your message here..."></textarea>

                <button class="rounded">Send Message</button>

            </form>

        </div>

    </div>

  </div>

</div>

</section>

<script>

// Get the modal

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";

}

</script>

Answer 1

我想这是因为你这样做：var btn = document.getElementById("myBtn");大概你只有1个ID被调用，或者如果你确实有更多，那么它只会调用它每次找到的第一个IDmyBtn你应该改变方法。将所有用户存储在具有唯一 ID 的对象数组中。 在此数组上显示所有用户。然后，当您单击一个时，将 作为参数传入。然后使用它来过滤数组以显示相关内容。下面是简化的示例.mapIDidconst users = [&nbsp; &nbsp;{id: 1, name: 'Tom', email: '[e-mail]},&nbsp; &nbsp;{id: 2, name: 'Sam', email: 'sametest.com},]然后映射它们以呈现它们users.map((user) =>&nbsp;&nbsp; &nbsp;<div onClick={() => renderModalForCorrectUser(user.id)>&nbsp; &nbsp; &nbsp;<div> {user.name} </div>&nbsp; &nbsp; &nbsp;<div> {user.email} </div>&nbsp; &nbsp;</div>然后function renderModalForCorrectUser(id) {&nbsp; &nbsp; //find the correct user by id&nbsp; &nbsp; // then do the opening of the modal by passing in the relevant users details}