javascript - Rails & JS : Make panels generated by . 每个功能独立切换

Question

我一次只能使用下拉菜单时遇到问题。问题是我正在使用 .each 函数。因此，我不知道如何使每个下拉菜单都有一个特定的 id 或类，以便使我的 .click 函数在每个下拉菜单上单独运行。

这是我嵌入的 ruby​​ 文件:

<% @companies.each do |company| %>
<div class="panel panel-primary">
  <div class="panel-heading show_hide_panel"></div>
  <div class="panel-body panel">
   ....
  </div>
</div>
<%end%>

这就是我作为 JS 所拥有的:

$(".panel").hide();

$(".show_hide_panel").click(function(){
  $(".panel").slideToggle();
}); 

我的问题:我怎样才能使由 the.each 生成的每个面板独立地在单击时切换，而不是在仅单击一个时同时切换所有面板。

谢谢。如果我不够清楚，请告诉我。

Answer 1

JQuery 有一种方法可以做到这一点。基本上，您可以通过在函数中使用 $(this) 来获取您单击的元素。

在您的特定情况下，您单击panel-header，因此它在函数中变为$(this)。您想要打开 panel-body，因此选择其同级 $(this).siblings('.panel-body').slideToggle()。 完整代码:

$(document).on("click",".panel-heading", function () {

         $(this).siblings('.panel-body').slideToggle();
    });