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

＆＃13;

$(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;
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Rails jQuery截断'read more＆amp;阅读更少'链接

1 个答案: