html - PHP为文本动态添加显示隐藏功能

Question

我有从数据库中获取的 html 文本。文本的结构总是这样：

<div>Short text</div>Long text

并且重复：（不可预测的次数）

<div>Short text</div>Long text
<div>Short text</div>Long text
<div>Short text</div>Long text
<div>Short text</div>Long text

我想要做的是检查“长文本”的长度，如果它超过 200 个字符（例如），则隐藏其余字符并添加一个显示隐藏按钮。

所以：

Long <span id="hidden1" style="display:none;">text</span>
<a href="#" onclick="showHide(1)">show/hide</a>

如何解析该数据库获取的 HTML 并阅读“长文本”以应用上述更改？

我已经在这几天了，我就是想不通。

谢谢！

Answer 1

Jquery truncate插件几乎完全符合您的要求，允许您以特定字符限制动态隐藏/显示文本。

$().ready(function() {  
  $('#textContainer').jTruncate({  
      length: 200,  
      minTrail: 0,  
      moreText: "[show]",  
      lessText: "[hide]",  
      ellipsisText: " ...", // how indicate to user truncation has happened
      moreAni: "fast",  
      lessAni: 2000  
  });  
});  

使用此插件的优点是您无需通过 PHP 在内容中的任意点（显示/隐藏跨度等）插入额外的标记，因为插件会为您处理所有这些。