Rails MaterialiseCSS将User.id传递给Modal

时间:2016-09-14 14:21:58

标签: javascript ruby-on-rails materialize

正如标题所示,我想使用MaterialiseCSS 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%>

(文档)$。就绪(函数(){

//&#34; href&#34; .modal-trigger的属性必须指定想要触发的模态ID   $(&#39; .modal触发&#39)。leanModal();   });

1 个答案:

答案 0 :(得分:0)

是否可以关联每个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">