更改列表点击轨道上的内容答案

【问题标题】：Change content on list click rails更改列表点击轨道上的内容
【发布时间】：2020-05-11 07:08:33
【问题描述】：

我有一个由以下组成的模态： - 左侧的步骤列表 - 右侧的内容框

我需要能够点击左侧的步骤，右侧的内容会随着相应的步骤描述发生变化。

左侧显示步骤和右侧显示内容的标记：

 <div class="uk-width-1-3">
   <ul class="pill-steps">
      <% @pill.steps.each_with_index do |step, index| %>
        <li class="pill-step"><span class="pill-number"><%= index + 1%></span><%= step.name %></li>
      <% end %>
   </ul>
 </div>
 <div class="uk-width-2-3 uk-padding-large pill-content">
   <% if @pill.steps.any? %>
    <% @pill.steps.each_with_index do |step, index| %>
       <div id="<%= @pill.id %>" class="pill">
         <h2><%= @pill.steps.first.name %></h2>
         <p><%= @pill.steps.first.desc %></p>
       </div>
    <% end %>
   <% end %>
 </div>

点击左侧步骤并在右侧显示内容的js：

  <script>
    $(".pill-step").click(function() {
      $(".pill-content").html("<h2><%= step.name %></h2><p><%= step.desc %></p>");
    });
  </script>

我不知道将 JS 放在哪里或如何使其动态化:( 基本上，我希望用户点击左侧的步骤，并在右侧显示相应的step.description 和 step.title。

关于如何实现这一点的任何想法？

谢谢！

【问题讨论】：

标签： jquery ruby-on-rails ruby

【解决方案1】：

可能有几种方法可以解决这个问题，但最简单的可能是最初给所有.pill 一个类来隐藏它们，所以像.hidden { display: none; } 这样的东西（也许不要把这个类添加到第一个丸，如果您需要加载内容框中的内容）。

在用户将要单击的元素上，您需要创建一些对将要显示的内容框中元素的 ID 的引用。我喜欢使用jQuery.data() 来处理这类事情，所以在可点击元素上，您可以添加一个数据属性并制作一个像这样的按钮：</button class="pill-button" data-pill-id="<%= @pill.id %>">。

然后对于您的 jQuery 点击代码，您需要隐藏所有 .pill 元素，然后只显示匹配的元素。所以，是这样的：

$('.pill-button').on('click', function() {
    $('.pill').addClass('hidden');
    $('#' + $(this).data('pillId')).removeClass('hidden');
});

希望能给你一个不错的起点。

【讨论】：