我试图在段落末尾添加“显示更多”链接,但“更多”链接未正确显示或未按正确的字符数 chop 。
此处代码:https://jsfiddle.net/7sp0mpp8/
$(document).ready(function() {
var showChar = 300;
var ellipsestext = "";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreelipses">'
+ ellipsestext
+ '</span>'
+ '<span class="morecontent">'
+ '<span>'
+ h
+ '</span> '
+ '<a href="" class="morelink">'
+ moretext
+ '</a>'
+ '</span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
最佳答案
您遇到了 3 个主要问题:
- 忘记包含 jQuery 库
- 将子字符串放入 h 变量中是错误的 - 它也从 c 变量中获取最后一个字符
- 最后你错过了将 display: none (或类似的东西)添加到你的
<span>
中。带有隐藏的附加内容。
修复版本
$(document).ready(function() {
var showChar = 30;
var ellipsestext = "";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span style="display:none;">' + h + '</span> <a href="" class="morelink">'+moretext+'</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
关于javascript - 显示更多链接未检测字符限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40338892/