帶有「更多閱讀」切換的Rails截斷

我有一段我想要截斷的段落，單擊「閱讀更多」選項並將其滑動到其餘內容。內容來自數據庫字段。下面是我對截斷：帶有「更多閱讀」切換的Rails截斷

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

我似乎無法找到一種方法，從數據庫中抽取數據來做到這一點。我看到很多使用全文的例子，其中包含要隱藏在單獨的div標籤中的文本。但是，由於這些內容來自數據庫並且是動態的，因此我無法找到有關如何執行此操作的任何信息。

來源

2013-03-07 lflores

這是一個簡單的答案，爲我工作。 http://stackoverflow.com/a/26854494/5551783 – dgreen22 2016-06-08 15:36:39

你可以嘗試以下

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

，或者如果你喜歡使用Read more鏈接

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

UPDATE

由於在軌道4,5，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>

來源

2013-03-07 03:31:06 jvnill

只是後續，你不能使用'omission'選項作爲鏈接的原因是截斷方法包括在字符的計數。您可以使用它，但是在計算要截斷的字符數時必須添加一些邏輯。 – jvnill 2013-03-07 03:43:22

您可以更改js部分，以便再次更改父級的內容。或者添加2個div，一個是截斷部分，另一個是未截斷部分，然後是切換div。 – jvnill 2013-03-10 01:01:44

只需將此部分'「$（this）.parent（）。html（'＃{escape_javascript @ major.glance}'）」'更改爲與MooTools等效的設置。 – jvnill 2014-06-03 00:32:58

我知道我加入這個對話有點遲。我一直在解決同樣的問題，嘗試上面的解決方案，這很好。但是，隱藏的SEO智慧內容並未被搜索引擎索引。我也檢查了Lynx，並且鏈接不能被遵循（顯然）。所以通過Jed Foster | readmore.js解決了這個解決方案 - lynx可以正確讀取它，現在我正在等待SE索引更新，看看我能否在搜索結果中找到自己。以防萬一有人處於類似的情況......

來源

2014-10-06 01:01:07

感謝您告訴我有關readmore.js的信息，這正是我嘗試做的事情。這看起來不錯。感謝分享！ – lflores 2014-10-16 16:23:22

帶有「更多閱讀」切換的Rails截斷

回答

相關問題