jquery 点击显示更多

<div class="servicepicture banxin"> ???????????????????????????????????<div class="imgcontent"> ???????????????????<div class="img"> ???????????????????????<img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" /> ???????????????????</div> ???????????????????<div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div> ???????????????????<div class="check">查看更多</div> ???????????????</div> ???????????????????????????????????<div class="imgcontent"> ???????????????????<div class="img"> ???????????????????????<img src="/uploads/image/20190411/0aaf7bd140beefad5316ffb07ede779c.png" /> ???????????????????</div> ???????????????????<div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div> ???????????????????<div class="check">查看更多</div> ???????????????</div> ???????????????????????????????????<div class="imgcontent"> ???????????????????<div class="img"> ???????????????????????<img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" /> ???????????????????</div> ???????????????????<div class="topic">在施工结束后公司将定期回访甲方装置的运行情况，反应器的温差情况，提供后续服务支持（包括催化剂撇头，部分更换等），确保甲方装置运行良好。公司配备24小时值守响应机制，随时随刻为客户解决因催化剂造成的突发问题。</div> ???????????????????<div class="check">查看更多</div>
</div>
</div>

.servicepicture { ???display: flex; ???flex-wrap: wrap; ???justify-content: flex-start; ???overflow: hidden; ???margin-top: 40px;}.banxin{width:1200px;margin:0 auto;}.imgcontent { ???width: 375px; ???margin: 10px 12.5px;}.imgcontent .img { ???width: 375px; ???height: 280px; ???margin: 0 auto; ???overflow: hidden;}.imgcontent .img img { ???width: 375px; ???height: 280px;}.imgcontent .topic { ???width: 375px; ???margin: 0 auto; ???font-size: 14px; ???overflow: hidden; ???display: -webkit-box; ???-webkit-box-orient: vertical;}.check { ???width: 100px; ???height: 40px; ???margin: 0 auto; ???background: #A9010A; ???color: #FFFFFF; ???text-align: center; ???line-height: 40px; ???border-radius: 5px; ???margin-top: 30px;}

var arr = []; ???????var show = true; ???????function subTxt() { ???????????$(‘.servicepicture .imgcontent .topic‘).each(function(index) { ???????????????var len = $(this).text().length; ???????????????var that = $(this); ???????????????var oldTxt = $(this).text(); ???????????????arr.push(oldTxt); ???????????????var txt = $(this).text().substr(0, 30) + ‘...‘; ???????????????$(this).text(txt) ???????????}) ???????} ???????subTxt(); ???????$(".servicepicture .imgcontent .check").each(function(index) { ???????????$(this).click(function() { ???????????????console.log(index); ???????????????if(!show){ ???????????????????subTxt(); ???????????????????show = !show; ???????????????}else{ ???????????????????$(‘.servicepicture .imgcontent .topic‘).eq(index).text(arr[index]); ???????????????????show = !show; ???????????????} ???????????}) ???????})