Изменить содержание в списке кликов

Question

У меня есть модал, состоящий из: - списка шагов слева - поля для контента справа

Мне нужно иметь возможность нажимать на шаги слева и контент изменяется справа с соответствующим описанием шага.

Разметка для отображения шагов слева и содержимого справа:

 <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 или как сделать оно динамически c :( В основном, я хочу, чтобы пользователь щелкнул по шагу слева и показал соответствующие step.description и step.title справа.

Любые идеи о том, как этого добиться?

Спасибо!

Answer 1

Вероятно, есть несколько способов приблизиться к этому, но самый простой, вероятно, изначально дать всем .pill класс, чтобы скрыть их, что-то вроде .hidden { display: none; } (возможно, не добавляйте этот класс в первый pill, если вам нужно, чтобы что-то находилось в поле содержимого при загрузке).

На элементе, на который собирается щелкнуть пользователь, необходимо создать некоторую ссылку на идентификатор элемента в окне содержимого это будет раскрыто. Мне нравится использовать 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');
});

Надеюсь, это даст вам достойную стартовую позицию.