在 Rails 应用程序中单击更改 div 类答案

【问题标题】：Change div class on click in Rails app在 Rails 应用程序中单击更改 div 类
【发布时间】：2016-03-20 14:30:07
【问题描述】：

我有一个 Rails 应用程序，它按行显示步骤和子步骤。我正在寻找创建一个操作，其中单击步骤行会将其类从“step_container”更改为“step_container active”，然后显示该步骤的相应子步骤行。我很难弄清楚如何使用 AJAX（或了解这是否是最好的工具）来实现这一点。

<% @steps.each do |step| %>
      <div class="step_container"> <!-- add 'active' if clicked-->
        <div class="medium-8 columns"><!-- add 'active_container' if clicked-->
          <div class="medium-5 columns step_info">
            <div class="step_number">
              <span><%= step.order %></span>
            </div>
            <div class="custom_step">
              <span class="step_title"><%= step.title %> (custom step)</span>
              <span class="step_desc"><%= step.description %></span>
            </div>
          </div>
        </div>

        <!-- Only show this div if top div is clicked -->
        <div class="medium-4 columns sub_steps_container">
          <% @substeps.where(step_id: step.id).each do |substep| %>
                  <div class="sub_steps">
                    <div class="step_number">
                      <span><%= substep.order %></span>
                    </div>
                    <div class="">
                      <span class="step_title"><%= substep.action %></span>
                      <span class="step_desc"><%= substep.description %></span>
                    </div>
                  </div>
          <% end %>
        </div>
      </div>
  <% end %>

提前感谢您的帮助。这花了我一天的大部分时间，但结果有限。

【问题讨论】：

标签： javascript ruby-on-rails

【解决方案1】：

这里不需要 AJAX，只需要一点 javascript 和 css。

JavaScript：

$('.step_container').click(function() {
  $(this).addClass('active');
}

CSS（萨斯）：

.step_container {
  .sub_steps_container {
    display: none;
  }

  &.active {
    .sub_steps_container {
      display: block;
    }
  }
}

【讨论】：

感谢您的解决方案！工作得非常好，非常简单。
还想指出我需要将调用包装在 $(document).ready(function() { ... });解决 turbolinks 问题 (stackoverflow.com/questions/18770517/…)

【解决方案2】：

如果我理解正确，您实际上不需要 Ajax。这可能很简单：

最初通过 css 隐藏 sub_step_container div。

.sub_steps_container {
  display: none;
}

将此添加到您的 HTML 代码中（或者更好的是，不要使用脚本标签并在单独的 JS 文件中使用）。

<script>
  $('.step_container').on('click', function(){
    $(this).addClass('active');
    $('.sub_steps_container').show()
  });
</script>

【讨论】：