Question

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

Answer 1

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

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

将搜索范围限制为当前点击的proc-names的共享parent：

$(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()

Answer 2

试试这个： -

$(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()

在jQuery中只选择下一个div

2 个答案: