我最近一直在开发评论功能。默认情况下,包含文本的段落元素的高度为80px。溢出设置为隐藏。
我还有另一个按钮(标记为“查看更多”),它通过将高度更改为“自动”来展开段落。只有在段落内容溢出默认的80px高度时,该按钮才应可见。否则,该按钮不得显示。
我尝试使用javascript循环和一些JQuery代码来实现这一点,但它并不能像应该的那样工作。它显示或隐藏所有评论部分的按钮。
以下是html:
<div class="commentOwnerPost">
<div class="commentPostHeader">
<h4 class="commentOwnerName"><a href="">NavyFoxKid</a></h4>
<h4 class="commentPostDate">3 days ago</h4>
</div>
<p class="commentText"> lorem ipsum dolor sit amet consectur lorem ipsum dolor sit amet consectur
amet consectur lorem ipsum dolor sit amet consectur lorem ipsum
</p>
<div class="commentPostFooter">
<a class="btnReply">Reply</a>
<a class="btnSeeMore">See More</a>
</div>
</div>
以下是 JavaScript 代码:
$(document).ready(function(){
var element = $('.commentOwnerPost');
for(i=0; i < element.length; i++){
var commentText = $(element[i]).children('.commentText');
if ($(commentText).offsetHeight < $(commentText).scrollHeight) {
$parent = $(commentText).parent('.commentOwnerPost');
$parent.find('.btnSeeMore').hide();
console.log('Comment text not overflowing ');
} else {
$parent = $(commentText).parent('.commentOwnerPost');
$parent.find('.btnSeeMore').show();
console.log('Comment text overflowing ');
}
$('.btnSeeMore').click(function(){
});
}
});