Rails усекать подробнее

Question

Rails усекать подробнее

1

Я прочитал эту тему, прочитал больше переключений на stackoverflow. Rails усекает с помощью "read more" toggle. Как я могу добавить возврат к усечению или вернуться к исходной форме или тексту в коде ниже, не обновляя страницу?

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to '...Read more', '', class: "read-more-#{@major.id}" %>
    <script>
      $('.read-more-<%= @major.id %>').on('click', function(e) {
        e.preventDefault()
        $(this).parent().html('<%= escape_javascript @major.glance %>')
      })
    </script>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

John 09 нояб. 2017, в 09:46

Источник

Теги:

javascript

ruby-on-rails

2 ответа

0

Измените внутреннюю часть if:

<div class='textControl'><%= truncate(@major.glance, length: 250) %></div>
<div class='textControl' style='display:none;'><%= @major.glance %></div>
<%= link_to '...Read more', '', class: "read-more-#{@major.id} textControl" %>
<%= link_to '...Hide more', '', class: "read-more-#{@major.id} textControl" style='display:none;' %>
<script>
  $('.read-more-<%= @major.id %>').on('click', function(e) {
    e.preventDefault();
    $('.textControl').toggle();
  })
</script>

Просто примечание. Это не лучший способ сделать это. Встроенный javascript - это запах кода. Он должен быть извлечен в отдельный файл и написан универсальным способом. Вы можете использовать метод siblings jQuery только для скрытия родных братьев, а не для всех объектов textControl.

Martin 09 нояб. 2017, в 06:34

Ещё вопросы

Sebastian Palma · Accepted Answer · 2017-11-09T07-37-00.000Z

Вы можете создать два divs, один с усеченным текстом, и один с полным текстом, который не будет показан, если пользователь нажмет кнопку "Подробнее", затем вы скроете первый и покажите второй. То же самое для чтения меньше:

<% if @major.glance.size > 250 %>
  <span class="truncated-paragraph-<%= @major.id %>">
    <%= truncate @major.glance, length: 250 %>
  </span>
  <span class="normal-paragraph-<%= @major.id %>" style="display: none;">
    <%= @major.glance %>
  </span>
  <a href="#" class="read-more-<%= @major.id %>">Read More</a>
  <a href="#" class="read-less-<%= @major.id %>">Hide</a>
<% else %>
  <%= @major.glance %>
<% end %>

<script type="text/javascript">
  $('[class^="read-more"]').click(function(element) {
    element.preventDefault()
    $('.truncated-paragraph-${elId($(this))}').hide()
    $('.normal-paragraph-${elId($(this))}').show()
  })

  $('[class^="read-less"]').click(function(element) {
    element.preventDefault()
    $('.normal-paragraph-${elId($(this))}').hide()
    $('.truncated-paragraph-${elId($(this))}').show()
  })

  function elId(element) {
    let elClassName = element.attr('class').split('-')
    return elClassName[elClassName.length - 1]
  }
</script>

Что-то вроде:

$('[class^="read-more"]').click(function(element) {
  element.preventDefault()
  $('.truncated-paragraph-${elId($(this))}').hide()
  $('.normal-paragraph-${elId($(this))}').show()
})

$('[class^="read-less"]').click(function(element) {
  element.preventDefault()
  $('.normal-paragraph-${elId($(this))}').hide()
  $('.truncated-paragraph-${elId($(this))}').show()
})

function elId(element) {
  let elClassName = element.attr('class').split('-')
  return elClassName[elClassName.length - 1]
}

<script src="/jquery.min.js"></script>

<span class="truncated-paragraph-1">
  Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo ...
</span>
<span class="normal-paragraph-1" style="display: none;">
  Morbi non est nec mi vulputate varius vel ac mi. In efficitur bibendum nibh nec fringilla. Integer nec est blandit, ullamcorper leo iaculis, blandit dui. Suspendisse sem mauris, maximus quis porta elementum, fermentum in dolor. Curabitur egestas arcu ante. Praesent a efficitur leo. Proin molestie turpis in sapien porta varius. Sed nisl enim, blandit ac orci in, iaculis consectetur tellus.

Quisque sapien felis, gravida in leo eget, dictum tempus felis. Ut pulvinar ex nisi, et rutrum leo dignissim at. Integer facilisis facilisis odio. Quisque consequat, ex eu sodales posuere, orci tellus accumsan justo, vitae finibus turpis turpis et tortor. Praesent luctus consequat tortor vel egestas. Suspendisse finibus interdum varius. Curabitur facilisis aliquet diam ac aliquet. Phasellus in felis placerat, gravida velit at, pulvinar nulla. Mauris ut faucibus felis, vitae semper elit. Aenean vel tincidunt leo. Donec varius est a hendrerit eleifend. Maecenas iaculis porta tortor imperdiet blandit. Praesent fermentum mauris metus, eu pulvinar lectus euismod vitae.
</span>
<a href="#" class="read-more-1">Read More</a>
<a href="#" class="read-less-1">Hide</a>