複数のフィールドにまたがる特定の長さのテキストを非表示/表示する

Question

テキストを一定の文字数/長さにしたいと思っています。その長さの後に、テキストの全長を表示するリンクを付ける。しかし、それだけでなく、この機能を複数のテキストフィールドで機能させたいと思っています。この場合、私はLaravelを使用しています。したがって、ブレードテンプレートです。

HTML /ブレード：

@foreach ($statuses as $status) 
    <div class="status-body" data-body-status-id="{{ $status->id }}"> 
     <div class="status-body-text status-body-text-{{ $status->id }}">{!! $status->body !!}</div> 
    </div> 
    <div class="btn-overflow btn-overflow-{{ $status->id }}" data-id-value="{{ $status->id }}">Show</div> 
@endforeach 

スクリプト：

var text = $('.status-body-text'), 
    btn = $('.btn-overflow'), 
     h = text[0].scrollHeight; 

if(h > 45) { 
    btn.addClass('less'); 
    btn.css('display', 'block'); 
} 

btn.click(function(e) 
{ 
    e.stopPropagation(); 

    if (btn.hasClass('less')) { 
     btn.removeClass('less'); 
     btn.addClass('more'); 
     btn.text('Hide'); 

     text.animate({'height': h}); 
    } else { 
     btn.addClass('less'); 
     btn.removeClass('more'); 
     btn.text('Show'); 
     text.animate({'height': '45px'}); 
    } 
}); 

スタイリング：

.btn-overflow { 
display: none; 
border-radius: 3px; 
text-align: center; 
width: 42px; 
margin: 0 auto; 

} 
.status-body-text { 
height:45px; 
display:block; 
overflow:hidden; 
word-break: break-word; 
word-wrap: break-word; 
} 

の作業フィドル：https://jsfiddle.net/jmzqsc1r/1/

ご覧のとおり、意図した機能が動作します。超過したテキストは非表示になり、.status-body-textが45pxを超えると表示ボタンのみが表示され、アニメーションは素晴らしいなど

問題は、この解決策はページ上の1つだけを対象としていますが、私はこれらの何百もあるかもしれません。期待どおり、最初は.status-body-textのみが非表示になり（45pxを超える場合）、表示/非表示ボタンはすべて.status-body-textフィールドに影響します。

これを修正する私の試みは、データ属性識別子の実装を試みることでしたが、良い解決策を見つけることができませんでした。

識別子は、btn-overflow-{{ $status->id }}のようにまだマークアップされており、対応するstatus-body-text-{{ $status->id }}と同じ終了番号を持ちます。

ご協力いただければ幸いです。

編集：

Shiladityaの答えは参考になりましたが、あなたは2番目のテキストボックスのテキストのサイズを小さくすれば、それはまだ表示するボタンを示しています。または、最初のテキストボックスのサイズを小さくすると、2番目のボックスに表示ボタンは表示されません。これと同じように：jsfiddle.net/jmzqsc1r/4

Answer 1

ここでは、ソリューションhttps://jsfiddle.net/jmzqsc1r/3/

var text = $('.status-body-text'), 
 
    btn = $('.btn-overflow'), 
 
     h = text[0].scrollHeight; 
 

 
if(h > 45) { 
 
\t btn.addClass('less'); 
 
\t btn.css('display', 'block'); 
 
} 
 

 
btn.click(function(e) 
 
{ 
 
    e.stopPropagation(); 
 

 
    if ($(this).hasClass('less')) { 
 
     $(this).removeClass('less'); 
 
     $(this).addClass('more'); 
 
     $(this).text('Hide'); 
 

 
     $('#cont' + $(this).attr('val')).animate({'height': h}); 
 
    } else { 
 
     $(this).addClass('less'); 
 
     $(this).removeClass('more'); 
 
     $(this).text('Show'); 
 
     $('#cont' + $(this).attr('val')).animate({'height': '45px'}); 
 
    } 
 
}); \t

.btn-overflow { 
 
display: none; 
 
border-radius: 3px; 
 
text-align: center; 
 
margin: 0 auto; 
 
} 
 
.status-body-text { 
 
height:45px; 
 
display:block; 
 
overflow:hidden; 
 
word-break: break-word; 
 
word-wrap: break-word; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="status-body-text" id="cont1"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.sad sdadsadsadsadsa 
 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.sad sdadsadsadsadsa 
 
</div> 
 
<a class="btn-overflow" href="#" val="1">Show</a> 
 

 

 
<div class="status-body-text" id="cont2"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.sad sdadsadsadsadsa 
 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.sad sdadsadsadsadsa 
 
</div> 
 
<a class="btn-overflow" href="#" val="2">Show</a>

で行く私はちょうどあなたがそれを期待しているとして、それが動作するコード&の一部を変更しました。