Как показать дочерний элемент, когда другой дочерний элемент переполнен с помощью JQuery

Question

Я недавно работал над функцией комментариев. По умолчанию высота элемента абзаца, содержащего текст, составляет 80 пикселей. Переполнение установлено в скрытое.

У меня есть еще одна кнопка (обозначенная «See More»), которая расширяет абзац, меняя высоту на «auto». Эта кнопка должна отображаться только в том случае, если содержимое абзаца переполняет высоту 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 
 
\t amet consectur lorem ipsum dolor sit amet consectur lorem ipsum 
 
    </p> 
 
\t 
 
    <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(){ 
 
\t \t \t 
 
    }); 
 
    } 
 
});

Спасибо, что нашли время, чтобы прочитать , Любая помощь будет оценена по достоинству.

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 
 
\t amet consectur lorem ipsum dolor sit amet consectur lorem ipsum 
 
    </p> 
 
\t 
 
    <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> 
 
\t 
 
    <div class="commentPostFooter"> 
 
    <a class="btnReply">Reply</a> 
 
    <a class="btnSeeMore">See More</a> 
 
    </div> 
 
</div>