javascript - Rails 使用 'read more' 切换 chop

Question

我有一个段落，我想通过单击“阅读更多”选项 chop 它，然后让它与其余内容一起滑动打开。内容来自数据库字段。这是我 chop 的内容:

<%= truncate(@major.glance, :length => 250, :omission => '... Read More')%>

我似乎无法找到一种方法来处理从数据库中提取的数据。我看到很多使用全文的例子，你想在一个单独的 div 标签中隐藏文本。但是，由于此内容来自数据库并且是动态的，所以我找不到有关如何执行此操作的任何信息。

Answer 1

你可以试试下面的方法

<div>
  <% if @major.glance.length > 250 %>
    <%= link_to_function truncate(@major.glance, length: 250), "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
</div>

或者如果您更喜欢使用阅读更多链接

<div>
  <% if @major.glance.length > 250 %>
    <%= truncate(@major.glance, length: 250) %>
    <%= link_to_function '...Read more', "$(this).parent().html('#{escape_javascript @major.glance}')" %>
  <% else %>
    <%= @major.glance %>
  <% end %>
<div>

更新

由于在 Rails 4 中，link_to_function 已被弃用，建议使用非干扰性 js，使用以下

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