时间戳

首页 > 解决方案 > 更改列表点击轨道上的内容

jquery - 更改列表点击轨道上的内容

问题描述

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

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

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

 <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点击左边的step并在右边显示内容：

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

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

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

谢谢！

标签： jqueryruby-on-railsruby

解决方案

可能有几种方法可以解决这个问题，但最简单的可能是最初给所有的.pilla 类来隐藏它们，所以像.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');
});

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

推荐阅读