正如标题所示,我想使用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(); });
答案 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">