我正在尝试对此进行编码，并且＆＃34;阅读更多＆＃34;链接工作正常，但＆＃34;显示较少＆＃34;链接不是。我无法检测到错误。
在这段代码中有一个带有class="show-less"的锚标记，我试图用class="spanTxt"隐藏span元素，但是有些东西是错误的并且它没有隐藏span元素。
我没有得到它，如果我可以在阅读更多链接中display:inline，那么当我display:none显示较少的链接时，为什么它不起作用。
提前致谢：）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Add Read More Link</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(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).replaceWith('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>');
}
});
$(".read-more").click(function(){
$(".spanTxt").css("display","inline");
$(".show-read-more").append('<a href="#" class="show-less">show less...</a>');
$(this).hide();
});
$(".show-less").click(function(){
$(".spanTxt").css("display","none");
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
</body>
</html>
答案 0 :(得分：1)
你遇到了几个问题（有些问题导致代码无法运行，有些问题导致工作正常，但仅限于第一个p.show-read-more元素。
以下是修复：
$(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);
var newP = $('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>')
newP.append($('<a href="#" class="show-less">show less...</a>').hide())
$(this).replaceWith(newP);
}
});
$(".read-more").click(function(){
$(this).parent('.show-read-more').find('.spanTxt').css("display","inline");
$(this).parent('.show-read-more').find('.show-less').show();
$(this).hide();
});
$(document).on('click', '.show-less', function(){
$(this).parent('.show-read-more').find('.read-more').show();
$(this).parent('.show-read-more').find(".spanTxt").hide();
$(this).hide();
});
});<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
答案 1 :(得分：-1)
您尚未在脚本末尾添加$(document).ready(function(){的结尾。否则javascript会抛出错误。