jquery 続きを読むボタンを押すと全コメントが発火してしまう。

Question

cakephpでアプリを作ってます。

長文に対して一定行を越えたら続きを読むボタンを発生させて残りを隠し、押下時に全文表示させたいです。

機能いが発火するまでは来たのですが、現在は押下時に全レビューに発火してしまいます。
やりたいことは一件ずつ指定して発火させたいです。

jqueryで要素をforeachで回してとるのかと考えて試行錯誤しています。

どうぞよろしくお願いします。

<script>
$(function() {
        var textHeight = $('.detail-user-comment').height();                                                          
                                                                                                                      
        var arraya = new Array(textHeight);                                                                           
        console.log(arraya);                                                                                          
  
        var lineHeight = parseFloat($('.detail-user-comment').css('line-height'));                                    
        var lineNum = 3;                                                                                              
        var textNewHeight = lineHeight * lineNum;                                                                     

        if (textHeight > textNewHeight) {                                                                             
        $('.detail-user-comment').css({                                                                               
                'height': textNewHeight,                                                                              
                'overflow':'hidden'                                                                                   
                });                                                                                                   
        $('.readmore-btn').show();                                                                                    
        $('.readmore-btn').click(function() {                                                                         
                $(this).hide();                                                                                       
                $('.detail-user-comment').css({                                                                       
                        'height': textHeight,                                                                         
                        'overflow': 'visible'                                                                         
                        });                                                                                           
                return false;                                                                                         
                });                                                                                                   
        };                                                                                                            
});                                                                                                                   
</script>    

<div class="detail-user-comment">                                                                                     
<?php  echo h( $val['comment'] ); ?>                                                                                  
</div>
<p class="readmore-btn"><a href="">続きを読む</a></p>  

Answer 1

$('.readmore-btn').click(function() {
    $(this).hide();
  //$('.detail-user-comment').css({
    $(this).prev().css({ // クリックされた要素を基点に探すように書き換える
        'height': textHeight,
        'overflow': 'visible'
    });
    return false;
});

【.prev() | jQuery API Documentation】
https://api.jquery.com/prev/

Comments

[m.kk]

ありがとうございます！
こちらのやり方でもできました！

Answer 2

idを振って指定するか、currentTargetから「イベントが発火した自身のコメント」を指定するようにすれば良いかと思います。

※未確認

        $('.readmore-btn').click(function(e) {                                                                         
                $(e.currentTarget).hide();                                                                                       
                $(e.currentTarget).prev('.detail-user-comment').css({                                                                       
                        'height': textHeight,                                                                         
                        'overflow': 'visible'                                                                         
                        });                                                                                           
                return false;                                                                                         
                });                                                                                                   
        };        

Comments

[m.kk]

ありがとうございます！
うまくできました！

[m.ts10806]

clickのところも本当は
$('.readmore-btn').on('click',function(e) {

のほうが良いです。
動的に要素が増えるなら
$(document).on('click','.readmore-btn',function(e) {

なぜかは調べてください。