Rails MaterializeCSS 将 User.id 传递给 Modal答案

【问题标题】：Rails MaterializeCSS Passing User.id to ModalRails MaterializeCSS 将 User.id 传递给 Modal
【发布时间】：2016-09-14 14:21:57
【问题描述】：

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

           <%@member.each 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%>

$(document).ready(function(){

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

【问题讨论】：

标签： javascript ruby-on-rails materialize

【解决方案1】：

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

<%@member.each 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">

【讨论】：