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

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 modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks on the button, open the modalbtn.onclick = function() {  modal.style.display = "block";}</script>

Answer 1

我想这是因为你这样做：

var btn = document.getElementById("myBtn");大概你只有1个ID被调用，或者如果你确实有更多，那么它只会调用它每次找到的第一个IDmyBtn

你应该改变方法。将所有用户存储在具有唯一 ID 的对象数组中。 在此数组上显示所有用户。然后，当您单击一个时，将 作为参数传入。然后使用它来过滤数组以显示相关内容。下面是简化的示例.mapIDid

const users = [

   {id: 1, name: 'Tom', email: '[e-mail]},

   {id: 2, name: 'Sam', email: 'sametest.com},

]

然后映射它们以呈现它们

users.map((user) => 

   <div onClick={() => renderModalForCorrectUser(user.id)>

     <div> {user.name} </div>

     <div> {user.email} </div>

   </div>

然后

function renderModalForCorrectUser(id) {

    //find the correct user by id

    // then do the opening of the modal by passing in the relevant users details

}