Cách hiển thị phần tử con khi phần tử con khác tràn ngập với JQuery

Question

Gần đây tôi đã làm việc trên một tính năng nhận xét. Theo mặc định, chiều cao của phần tử đoạn văn bản chứa 80px. Luồng tràn được đặt thành ẩn.

Tôi có một nút khác (có nhãn "Xem thêm") mở rộng đoạn văn bằng cách thay đổi chiều cao thành 'tự động'. Nút này chỉ nên hiển thị nếu nội dung đoạn đang tràn chiều cao 80px mặc định. Nếu không, nút không được hiển thị.

Tôi đã cố gắng thực hiện điều này bằng javascript cho vòng lặp và một số mã JQuery, mặc dù nó không hoạt động như mong muốn. Nó cho thấy hoặc ẩn nút cho tất cả các phần bình luận.

Đây là 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>

Đây là 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 
 
    }); 
 
    } 
 
});

Cảm ơn đã dành thời gian để đọc . Bất kỳ trợ giúp sẽ được đánh giá cao.

Answer 1

Nó hoạt động một cách hoàn hảo đối với tôi, tôi đơn giản hóa mã của bạn:

$(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>