Đường ray cắt ngắn bằng nút chuyển 'đọc thêm'

Question

Tôi có một đoạn mà tôi muốn cắt ngắn với tùy chọn nhấp "đọc thêm" và mở nó ra với phần còn lại của nội dung. Nội dung đến từ một trường cơ sở dữ liệu. Dưới đây là những gì tôi có cho truncate:

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

Tôi dường như không tìm cách làm điều này với dữ liệu được lấy từ cơ sở dữ liệu. Tôi thấy rất nhiều ví dụ sử dụng văn bản đầy đủ với văn bản bạn muốn ẩn trong thẻ div riêng biệt. Nhưng, vì nội dung này đến từ cơ sở dữ liệu và năng động, tôi không thể tìm thấy bất kỳ thông tin nào về cách thực hiện.

Answer 1

Bạn có thể thử như sau

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

hoặc nếu bạn thích sử dụng Read more liên kết

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

CẬP NHẬT

Vì trong Rails 4, link_to_function bị phản đối và nó là được khuyến khích để có js không obstrusive, sử dụng sau đây

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

Tôi biết tôi đang tham gia cuộc trò chuyện này muộn một chút. Tôi đã giải quyết vấn đề tương tự, thử giải pháp ở trên, hoạt động tốt. Tuy nhiên, nội dung SEO khôn ngoan đã bị ẩn không được công cụ tìm kiếm lập chỉ mục. Tôi cũng đã đăng ký Lynx và không thể theo dõi liên kết (hiển nhiên). Vì vậy, giải quyết cho các giải pháp này bởi Jed Foster | readmore.js - lynx có thể đọc nó đúng cách và bây giờ tôi đang chờ đợi chỉ số SE để cập nhật và xem nếu tôi có thể tìm thấy bản thân mình trong kết quả tìm kiếm. Chỉ trong trường hợp ai đó đang ở trong một tình huống tương tự ...