javascript - Rails jQuery chop 'read more & read less' 链接

Question

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

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

因为你正在 chop jquery，所以你也不需要这个条件

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

因为如果评论内容少于 100 则不会显示阅读更多链接

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