他の子要素がJQueryでオーバーフローしているときに子要素を表示する方法

Question

最近コメント機能を使っています。デフォルトでは、テキストを含む段落要素の高さは80ピクセルです。オーバーフローは非表示に設定されます。

高さを '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>