我有一个带有列表的 Rails 应用程序,每个列表项在 div 中都有有关该项目的详细信息,如下所示:
<ul>
<% @procedures.each do |procedure| %>
<li class="proc-names">
<%= link_to procedure.apc %>
</li>
<div class="proc-stats">
<% @all_procedures = Procedure.where("apc = ?", procedure.apc) %>
<% avg_charges = 0 %>
<% avg_payments = 0 %>
<% @all_procedures.each do |pr| %>
<% avg_charges += pr.avg_submitted_charges.to_i %>
<% avg_payments += pr.avg_total_payments.to_i %>
<% end %>
National average submitted charges: $<%= number_with_delimiter(avg_charges, delimiter: ',') %><br>
National average total payments: $<%= number_with_delimiter(avg_payments, delimiter: ',') %><br>
</div>
<% end %>
</ul>
我试图做到这一点,以便当单击链接时,它只显示该项目的详细信息(.proc-stats)。这是我迄今为止拥有的 jQuery 代码,但现在当单击一个链接时,它会显示每个列表项的详细信息。有建议吗?
$(document).ready ->
$('.proc-names').click (event) ->
event.preventDefault()
$('.proc-stats').slideToggle()
最佳答案
您当前正在选择全部 .proc-stats
。
相反,您需要找到相对于被单击的 .proc-names
的下一个 .proc-stats
。有几种方法可以做到这一点:
将您的搜索限制在共享 parent 内当前点击的
proc-names
:$(document).ready -> $('.proc-names').click (event) -> event.preventDefault() $(this).parent().find('.proc-stats').slideToggle()
查找当前点击的
.proc-names
的sibling.proc-stats
:$(document).ready -> $('.proc-names').click (event) -> event.preventDefault() $(this).next('.proc-stats').slideToggle()
修复您的标记,使您的
.proc-stats
包含在.proc-name
中,这样您的标记就有效,然后查找.proc-stats
内点击.proc-name
:$(document).ready -> $('.proc-names').click (event) -> event.preventDefault() $(this).find('.proc-stats').slideToggle()
关于jquery - 在 jQuery 中仅选择下一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17116783/