1

我有一个带有列表的 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()
4

2 回答 2

2

您当前正在选择所有 .proc-stats.

相反，您需要找到下一个.proc-stats，相对于.proc-names被点击的那个。有几种方法可以做到这一点：

  1. 将您的搜索限制在当前单击的共享父proc-names级：

    $(document).ready ->
  $('.proc-names').click (event) ->
    event.preventDefault()
    $(this).parent().find('.proc-stats').slideToggle()

  2. 找到当前点击.proc-names的兄弟 .proc-stats：

    $(document).ready ->
  $('.proc-names').click (event) ->
    event.preventDefault()
    $(this).next('.proc-stats').slideToggle()

  3. 修复您的标记，使您.proc-stats的包含在 中.proc-name，使您的标记有效，然后.proc-stats 在单击中找到.proc-name：

    $(document).ready ->
  $('.proc-names').click (event) ->
    event.preventDefault()
    $(this).find('.proc-stats').slideToggle()
于 2013-06-14T20:31:47.907 回答
1

尝试这个：-

$(document).ready ->
  $('.proc-names').click (event)
    event.preventDefault()
    $(this).next('.proc-stats').slideToggle()

但是更改 HTML：-

<ul>
 <% @procedures.each do |procedure| %>
 <li class="proc-names">
  <%= link_to procedure.apc %>
<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 %>
 </li>


</ul>

在下面使用更改后的 HTML：-

$(document).ready ->
  $('.proc-names').click (event)
    event.preventDefault()
    $(this).find('.proc-stats').slideToggle()
于 2013-06-14T20:31:57.017 回答