Rails MaterializeCSS传递用户.id到Modal

Question

正如标题所示，我想使用MaterializeCSS模态来显示用户数据。目前的问题是，虽然每张卡都有一个触发器，但所有触发器都显示相同的模态。我假设这是因为没有对象数据被传递。对我来说，解决这个问题的最好方法是什么?谢谢你！

           <[e-mail] do |x|%>
           <div class="member-card z-depth-2">
             <a href="/users/<%=x.id%>">
             <img src="<%=x.avatar%>"/>
             </a>
             <div class="member-info">
               <strong><%=x.first_name.capitalize!%> <%=x.last_name.capitalize!%></strong>
               <button data-target="modal1" class="btn modal-trigger" id="<%=x.id%>" >About Me</button>
               <div id="modal1" class="modal">
                 <div class="modal-content">
                   <img src="<%=x.avatar%>" alt="" height="300px" width="350px"/>
                   <h4><%=x.first_name.capitalize!%></h4>
                 </div>
                 <div class="modal-footer">
                   <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
                 </div>
               </div>
             </div>
           </div>
           <%end%>

文档

$()时()函数{

//.modal-trigger的"href"属性必须指定要触发的模态ID$ (' .modal-trigger ') .leanModal ();});

Answer 1

是否可以将每个div和按钮关联并附加到页面上?下面应该使用user id附加按钮data-target和div id属性。

<[e-mail] do |x|%> <div class="member-card z-depth-2"> <a href="/users/<%=x.id%>"> <img src="<%=x.avatar%>"/> </a> <div class="member-info"> <strong><%=x.first_name.capitalize!%> <%=x.last_name.capitalize!%></strong> <button data-target="modal<%=x.id%>" class="btn modal-trigger" id="<%=x.id%>" >About Me</button> <div id="modal<%=x.id%>enter code here" class="modal"> <div class="modal-content"> <img src="<%=x.avatar%>" alt="" height="300px" width="350px"/> <h4><%=x.first_name.capitalize!%></h4> </div> <div class="modal-footer"> <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> </div> </div> </div> </div> <%end%>

改变了什么?

<button data-target="modal<%=x.id%>" class="btn modal-trigger" id="<%=x.id%>" >About Me</button> <div id="modal<%=x.id%>enter code here" class="modal">