Question

我有一个rails应用程序，可以显示行中的步骤和子步骤。我正在寻找创建一个操作，点击一个步骤行将改变它的步骤＆＃39; step_container＆＃39; to＆＃39; step_container active＆＃39;，然后显示该步骤的相应子步骤行。我很难搞清楚如何使用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 %>

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

Answer 1

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

JavaScript的：

#include <stdio.h>
char a;
int main(void)
{
a = 'ayy lmao';
printf("%c", a);
getchar();
return 0;
}

CSS（sass）：

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

Answer 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>

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

2 个答案: