如果文本超过一定长度，则使用 jQuery 显示阅读更多链接
答案：使用 JavaScript substring() 方法
您可以将 JavaScript substring() 方法与 jQuery append() 和 html() 方法结合使用来截断文本的段落并在末尾添加阅读更多链接， 如果段落中的字符数超过一定长度。
以下示例中的 jQuery 代码将简单地修剪段落并在末尾添加阅读更多链接。 您可以通过单击阅读更多链接查看修剪后的内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add Read More Link</title>
<script src="https://code.jquery.com/jquery-3.5.1.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>
<p>这是一个段落。</p>
<p>This is another paragraph.</p>
<p class="show-read-more">This is a very long paragraph...</p>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements