Рубин "каждый делает" и сценарий Effect.BlindDown / Up - PullRequest
Новая
       1

Рубин "каждый делает" и сценарий Effect.BlindDown / Up

2 голосов
/ 10 января 2010

У меня есть список элементов с некоторыми деталями, которые я хотел бы раскрыть при нажатии на ссылку показать / скрыть подробности. после некоторых экспериментов я столкнулся с двумя проблемами.

  1. У меня проблемы с настройкой, чтобы ссылка «показать / скрыть» раскрывала только div определенного элемента. прямо сейчас, он раскрывает все элементы div при нажатии на любую из ссылок показать / скрыть.

  2. Кроме того, должен быть более элегантный способ сделать это, не выполняя цикл для генерации набора javascript. Я посмотрел на effect.multiple, но я не уверен, как использовать его в этом контексте.

Буду признателен за понимание или указание в общем направлении! Спасибо!

вот код для справки. 

                    <script type="text/javascript">
      function show_details() {
            <% @posts.each do |b| %>
        Effect.BlindDown('details_<%= b.id %>', {duration:0.3});
        $('hide_details_link_<%=  b.id %>').style.display = 'inline';
        $('show_details_link_<%=  b.id %>').style.display = 'none';
        <% end %>
      }

      function hide_details() {
             <% @posts.each do |b| %>
        Effect.BlindUp('details_<%= b.id %>', {duration:0.3});
        $('hide_details_link_<%=  b.id %>').style.display = 'none';
        $('show_details_link_<%=  b.id %>').style.display = 'inline';
        <% end %>
      }
    </script>

 <ul id="posts">
  <% @posts.each do |b| %>
           <li>



    <div id="show_details_link_<%= b.id %>" style="display:inline;">
      <%= link_to_function "show details", 'show_details()' %>
    </div>

    <div id="hide_details_link_<%= b.id %>" style="display:none;">
      <%= link_to_function "hide details", 'hide_details()' %>
    </div>


    <div id="details_<%= b.id %>" style="display:none;">

      <p> <%= b.comments %></p>


    </div>



                    </li>
       <li><%= link_to b.title, {:action => 'show', :id => b.id} -%></li>

      <% end %>
     </ul>

1 Ответ

2 голосов
/ 10 января 2010

Мне кажется, что все ваши ссылки показать / скрыть вызывают одну и ту же функцию (show_details() и т. Д.), Которая показывает / скрывает все сообщения (из-за цикла), а не конкретные. Вместо того, чтобы определять функцию для каждой из них, более элегантный способ решения этой проблемы будет выглядеть примерно так: 

<%= link_to_function "show details", "Effect.BlindDown('details_<%= b.id %>', {duration:0.3});" %>

Это, конечно, не ненавязчиво, но это начало.

EDIT

Я только что заметил ваши ссылки, которые вы хотите показать для каждого div. Ну, вы можете бросить это сразу после эффекта Blind: 

<%= link_to_function "show details", "Effect.BlindDown('details_<%= b.id %>', {duration:0.3});$('hide_details_link_<%=  b.id %>').style.display = 'inline';" %>

и т.д.

Или вы можете сделать цикл javascript в функции загрузки документа, который находит все div и привязывает функцию к каждому из них, но это становится более сложным, чем я хочу продемонстрировать, особенно если вы, кажется, не используете Прототип (хотя вы используете Scriptaculous? Это должно дать вам доступ к помощникам .show () /. Hide () ...)

Кроме того, зачем использовать div? Вы можете идентифицировать ссылки прямо по ссылкам (см. Опции link_to_function)

...