Rails & JS: 使 .each 函数生成的面板独立切换

Question

我一次只能打开下拉菜单时遇到问题。问题是我正在使用 .each 函数。因此，我不知道如何使每个下拉菜单都有一个特定的 id 或 class，以便使我的 .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，所以你 select 它的兄弟 $(this).siblings('.panel-body').slideToggle()。完整代码：

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

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

Answer 2

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

Rails & JS: 使 .each 函数生成的面板独立切换

Rails & JS: Make panels generated by .each function toggle independently

javascript

jquery

ruby-on-rails

drop-down-menu