[英]Adding JQuery "Read More" Script Without Stripping HTML tags
我將“閱讀更多”鏈接腳本應用於富 HTML 字段，以便截斷較長的副本塊。 下面是我正在使用的代碼：
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
在我的模板中，我將字段流入一個 div 並應用了 show-read-more 類，並且效果很好。
示例用法如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Add Read More Link</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function() { var maxLength = 300; $(".show-read-more").each(function() { var myStr = $(this).text(); if ($.trim(myStr).length > maxLength) { var newStr = myStr.substring(0, maxLength); var removedStr = myStr.substring(maxLength, $.trim(myStr).length); $(this).empty().html(newStr); $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>'); $(this).append('<span class="more-text">' + removedStr + '</span>'); } }); $(".read-more").click(function() { $(this).siblings(".more-text").contents().unwrap(); $(this).remove(); }); }); </script> <style> .show-read-more .more-text { display: none; } </style> </head> <body> <div class="show-read-more"> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is a very long paragraph...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur massa id odio pharetra, in varius diam tincidunt. Nulla fringilla nunc lorem. In et elit id diam porttitor finibus vitae ut odio. Morbi sollicitudin turpis non vulputate efficitur. Nulla rhoncus metus diam, porta consequat lacus scelerisque sed. Praesent et tempor mauris, non porttitor sapien. Pellentesque placerat ex non finibus gravida. Aenean at feugiat odio, sit amet ultricies diam. Integer vehicula pulvinar leo, vel laoreet neque lacinia nec. Vestibulum nec cursus orci, vel dapibus risus. Nullam et tincidunt mauris. Nunc iaculis egestas purus in rhoncus. Donec a turpis quis libero rutrum.</p> </div> </body> </html>
問題是代碼去掉了所有的 HTML 標簽，使它成為一個大的無格式段落。 如何在不剝離 HTML 的情況下實現相同的目標？
在 JavaScript/jQuery 中顯示更多/更少而不剝離 Html 標簽
[英]Show more/less without stripping Html tags in JavaScript/jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.