Question

我读了这个主题阅读stackoverflow上的更多切换 Rails truncate with a '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>

Answer 1

您可以创建两个div，一个包含截断的文本，另一个包含完整的文本，如果用户单击Read More，则会隐藏第一个，然后显示第二个div。一。读取相同：

<% 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>

类似的东西：

＆＃13;

$('[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]
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>

＆＃13;

Answer 2

将内部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是代码气味。它应该被提取到一个单独的文件并以通用的方式编写。您可以使用jQuery的siblings方法仅隐藏兄弟姐妹而不是所有textControl个对象。

Rails截断读取更多

2 个答案: