So zeigen Sie ein untergeordnetes Element an, wenn ein anderes untergeordnetes Element mit JQuery überläuft

Question

Ich habe kürzlich an einer Kommentarfunktion gearbeitet. Standardmäßig ist die Höhe des Absatzelements, das den Text enthält, 80 Pixel. Überlauf ist auf versteckt eingestellt.

Ich habe eine andere Schaltfläche (mit der Bezeichnung "See More"), die den Absatz durch Ändern der Höhe auf "Auto" erweitert. Diese Schaltfläche sollte nur sichtbar sein, wenn der Absatzinhalt die Standardhöhe von 80 Pixeln überschreitet. Ansonsten darf die Schaltfläche nicht angezeigt werden.

Ich habe versucht, dies mit einem Javascript für Schleife und einige JQuery-Code zu tun, obwohl es nicht so funktioniert, wie es sollte. Es zeigt oder verbirgt die Schaltfläche für alle Kommentarabschnitte. Hier

ist die 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>

Hier ist die 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 
 
    }); 
 
    } 
 
});

Vielen Dank für die Zeit nehmen, zu lesen . Jede Hilfe wäre willkommen.

Answer 1

Es funktioniert perfekt für mich, ich vereinfachen Code:

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