Rails & JS：使由 .each 函数生成的面板独立切换答案

【问题标题】：Rails & JS: Make panels generated by .each function toggle independentlyRails & JS：使由 .each 函数生成的面板独立切换
【发布时间】：2015-08-25 18:35:05
【问题描述】：

我一次只能在下拉菜单中出现问题。问题是我正在使用 .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 生成的面板独立地在点击时切换，而不是在只点击一个时一次全部切换。

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

【问题讨论】：

您应该使用 id 而不是类。也许使用迭代中的索引作为id？

标签： javascript jquery ruby-on-rails drop-down-menu

【解决方案1】：

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

在您的特定情况下，您单击了panel-header，因此它在函数中变为$(this)。你想打开panel-body，所以你选择它的兄弟$(this).siblings('.panel-body').slideToggle()。完整代码：

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

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

【讨论】：

“this”的问题是我没有切换这个，而是“this”中的一个项目。有没有办法做到这一点？
试试 $(this).children( ".panel-body" ).slideToggle();或任何标识符是里面的项目。
这似乎对我不起作用。由于 panel-body 不是标题的子项。
$(document).on("click",".panel-primary", function () {});应该管用。或者，更好的是，console.log( $(this) ) 来查看您实际点击的内容并告诉我。
如果是面板标题，您可以将 .children('.panel-body') 替换为 .siblings('.panel-body')

【解决方案2】：

$(".show_hide_panel").click(function(){
  $(this).closest(".panel-primary").find(".panel-body").slideToggle();
});

【讨论】：