在多個字段中隱藏/顯示特定長度內的更多文本

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超過45像素，動畫很好等情況下才顯示。

問題是，此解決方案僅適用於頁面上的這些解決方案中的單個解決方案，而我的我可能有數百個這樣的頁面。如您所料，只有第一個.status-body-text最初被隱藏（如果超過45px），並且顯示/隱藏按鈕會影響所有.status-body-text字段。

我試圖解決這個問題是試圖實現數據屬性標識符，但我似乎無法找到一個好的解決方案。

標識符仍處於標記中，如btn-overflow-{{ $status->id }}，它們的結尾編號與其對應的status-body-text-{{ $status->id }}相同。

任何幫助，將不勝感激。

編輯：

Shiladitya的答案是有幫助的，但如果你減少第二個文本框的文本大小，它仍然顯示顯示按鈕。或者，如果您減小第一個文本框的大小，則顯示按鈕不會出現在第二個框中。像這樣：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>

我只是修改了代碼&它作爲你期待它的一部分。