Rails jQuery截断'read more & read less'链接

Question

我正在尝试找到一种方法来显示带有"阅读更多"链接的评论，该链接在单击时不会刷新页面。 下面的代码不会刷新页面，但如果单击任何单个链接，所有评论都将展开，而不仅仅是一条评论。 我正在寻找一种截断评论的好方法，然后在单击"阅读更多"链接而不刷新页面时仅显示一条评论。

  <% @post.comments.order(created_at: :desc).each do |comment| %>
    <b><%= comment.user.first_name.capitalize + " "%><%= comment.user.last_name.capitalize %></b>
    <% if comment.content.length > 100 %>
      <div class='textControl'><%= truncate(comment.content, length: 100) %></div>
      <div class='textControl' style='display:none;'><%= comment.content %></div>
      <%= link_to '...Read more', '', class: "read-more-#{comment.id} textControl" %>
      <script>
        $('.read-more-<%= comment.id %>').on('click', function(e) {
          e.preventDefault();
          $('.textControl').toggle();
        })
      </script>
    <% else %>
      <%= comment.content %>
    <% end %>
    [<%= link_to ' Edit', edit_group_post_comment_path(comment.post.group, comment.post, comment) %> |
    <%= link_to 'Delete ', group_post_comment_path(@group, @post, comment), 
                           method: :delete, data: { confirm: 'Are you sure you want to delete this comment?' } %>]
    <%= time_ago_in_words(comment.updated_at) %>                                   
    <br><br>
  <% end %>

Answer 1

看，

你可以在没有额外的隐藏类的情况下做到这一点，就像你可以删除它一样，实际上，你不需要使用这些额外的行

<div class='textControl' style='display:none;'><%= comment.content %></div>
<%= link_to '...Read more', '', class: "read-more-#{comment.id} textControl" %>

实际的行将如下所示

<div class='textControl'><%= comment.content %></div>

因为你正在截断jQuery，所以你也不需要这个条件

<% if comment.content.length > 100 %>

因为如果评论内容小于 100，则它不会显示Read more链接

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Read more";
    var lesstext = "Read less";
    
    $('.textControl').each(function() {
        var content = $(this).html();
 
        if(content.length > showChar) {
 
            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);
 
            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
 
            $(this).html(html);
        }
    });
 
    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

a.morelink {
  text-decoration: none;
  outline: none;
}
.morecontent span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Greater then 100</h3>
<hr>
<p class="textControl">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<h3>Less then 100</h3>
<hr>
<p class="textControl">Lorem ipsum dolor sit amet</p>