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，动画很好等时才显示show按钮。

问题在于此解决方案仅适用于页面上的单个解决方案，而在我的页面上我可能有数百个这样的解决方案。正如您所料，最初只隐藏第一个.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/

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

$(document).ready(function(){
  $( "button.playtrailer" ).eq(2).after('<a href="#" id="particular">Show More</a>');//add a unique id to link
  $( "button.playtrailer:gt(2)" ).addClass('hide');
});

$(document).on('click','a#particular',function(e){
  e.preventDefault();
  $(this).addClass('hide');
  $('button.playtrailer').removeClass('hide');
});

＆＃13;

我刚修改了部分代码＆amp;它的工作方式与你期望的一样。

在多个字段中隐藏/显示特定长度内的更多文字

1 个答案: