javascript - JQuery溢出其他子元素时如何显示子元素

Question

我最近一直在研究评论功能。默认情况下，包含文本的段落元素的高度为 80px。溢出设置为隐藏。

我有另一个按钮(标记为“查看更多”)，它通过将高度更改为“自动”来扩展段落。只有当段落内容超出默认的 80 像素高度时，此按钮才应该可见。否则不得显示该按钮。

我已尝试使用 javascript for 循环和一些 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(){
			
    });
  }
});

感谢您花时间阅读。任何帮助将不胜感激。

Answer 1

它非常适合我，我简化了您的代码:

$(document).ready(function(){
  var elements = $('.commentOwnerPost');
  
  elements.each(function() {
    var el = $(this).find('.commentText').get(0);
    if(el.offsetHeight < el.scrollHeight) {
      $(this).find('.btnSeeMore').show();
    } else {
      $(this).find('.btnSeeMore').hide();
    }
  });
});

.commentText { max-height: 25px; overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


<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.
  </p>
	
  <div class="commentPostFooter">
    <a class="btnReply">Reply</a>
    <a class="btnSeeMore">See More</a>
  </div>
</div>