php - 如何在 WordPress 中显示阅读更多和阅读更少按钮
问题描述
我从数据库中获取列表,现在我必须根据内容添加阅读更多和阅读更少按钮,但我没有得到它。我在控制台中没有收到任何错误。
if($loop->have_posts() ) {
while($loop->have_posts() ) {
$loop->the_post();
$tid = $loop->ID;
$data .='<li>
<div class="overflowSet"><div class="imgwrap" style="background-image:url('.get_the_post_thumbnail_url($tid).')"></div></div>
<h5>'.wp_trim_words(get_the_title($tid),9, '...').'</h5>
<p class="countcontent">'.$the_content.'</p>
</li>';
}
}
我添加了下面的脚本来显示阅读更多和更少
$data .='<script>
jQuery(function($){
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
$(".countcontent").each(function($) {
var myStr = $(this).text();
if (jQuery.trim(myStr).length > maxLength) {
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(\'<span class="more-text">' + removedStr + '</span>\');
$(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');
}
});
$(".read-more").click(function() {
if($(this).hasClass("more")){
$(this).removeClass("more");
$(this).text(lesstxt);
$(this).siblings(".more-text").show();
}
else {
$(this).addClass("more");
$(this).text(moretxt);
$(this).siblings(".more-text").hide();
}
});
});
</script>';
我在这段代码中遇到了问题
jQuery(this).append(\'<span class="more-text">' + removedStr + '</span>\');
jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');
如果我添加下面的代码,那么我会得到文本。
jQuery(this).append(\'<span class="more-text">Read less</span>\');
jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">Read more</a>\');
解决方案
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
var removeStr;
var text = $('.countcontent').text();
$(".countcontent").each(function() {
var textlength = $(this).text().length;
if (textlength > maxLength) {
var myStr = $(this).text();
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(1, maxLength);
$(this).empty().html(newStr);
$(this).append('<span class="more more-text">' + moretxt + '</span>');
} else {
$(this).append('<sapn class="less less-txt">' + lesstxt + '</a>');
}
});
$(".more-text").click(function() {
if ($(this).hasClass("more")) {
$(this).removeClass("more");
$('.countcontent').empty();
$('.countcontent').text(text);
} else {
$(this).addClass("more");
$(this).text(moretxt);
$(this).siblings(".more-text").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="countcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
推荐阅读
- javascript - 检测文本字段中最后输入的字符的索引号
- r - 嵌套 For 循环以转置和整理重复输入的数据表
- machine-learning - 梯度下降不会收敛于线性回归
- javascript - 在不破坏 HTML 标签和单词的情况下将长字符串拆分成小块
- heroku - heroku (Node.JS) (Discord.js v12) 无法识别代码
- html - 在 Flutter Web 浏览器的 assets 文件夹中显示本地存储的 html 文件
- python-3.x - 无法建立新连接:[Errno -3] 名称解析临时失败',
- .net - 如何更改位图图像的颜色
- javascript - 在使用javascript在html中上传图像之前显示缩略图不起作用
- javascript - 从数组中设置元素的 ID