阅读更多按钮脚本不适用于 html 格式

Posted 2023-03-06

【中文标题】阅读更多按钮脚本不适用于 html 格式

【英文标题】：Read more button script not working with html format

【发布时间】：2021-08-14 19:53:37

【问题描述】：

我正在尝试向一些包含标题和段落的文本添加阅读更多功能。但它在一行中显示所有文本。我想在点击阅读更多时格式化文本。

这是我正在使用的代码：

$(function() 

  var minimized_elements = $('.case-desc');

  minimized_elements.each(function() 
    var t = $(this).text();
    if (t.length < 200) return;

    $(this).html(
      t.slice(0, 200) + '<span>... </span><a href="" class="umore">More</a>' +
      '<span style="display:none;">' + t.slice(200, t.length) + ' <a href="" class="uless">Less</a></span>'
    );

  );

  $('a.umore', minimized_elements).click(function(event) 
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();
  );

  $('a.uless', minimized_elements).click(function(event) 
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();
  );

);

是否可以获取带有格式的文本，因为我无法删除标题并希望按原样显示。

这是我的文字的样子

什么是 Lorem Ipsum？

Lorem Ipsum 只是印刷和排版行业的虚拟文本。

自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一台未知印刷商采用了一种类型的厨房并加扰它来制作一本类型样本书。

但我得到了

什么是 Lorem Ipsum？ Lorem Ipsum 只是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商使用了一种类型的厨房并加扰它来制作类型样本书。

【问题讨论】：

你也可以添加一个文本示例吗？

问题是var t = $(this).text(); 只获取文本，因此会有效地去除所有标签。见api.jquery.com/text“获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。”

我已经更新了一个我想要如何获得以及如何获得的示例。

这个问题有没有其他解决方案。

@MohammadUmar 请参阅上面 Chris 的评论。您必须收到 .html() 而不是 .text() 才能保留格式。然后你不能用.slice()在固定长度80处截断，你必须解析HTML才能在HTML标签或属性的中间不截断。另一种方法是循环通过.children()。

【参考方案1】：

jQuery(document).ready(function() 
  length = 200;
  cHtml = jQuery(".case-desc").html();
  cText = jQuery(".case-desc").html().substr(0, length).trim();
  jQuery(".case-desc").addClass("compressed").html(cText + "... <a href='#' class='rmore'>More</a>");
  window.handler = function() 
    jQuery('.rmore').click(function() 
      if (jQuery(".case-desc").hasClass("compressed")) 
        jQuery(".case-desc").html(cHtml + "<a href='#' class='rmore'>Less</a>");
        jQuery(".case-desc").removeClass("compressed");
        handler();
        return false;
       else 
        jQuery(".case-desc").html(cText + "... <a href='#' class='rmore'>More</a>");
        jQuery(".case-desc").addClass("compressed");
        handler();
        return false;
      
    );
  
  handler();
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="case-desc">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>