javascript - 自定义 chop 函数删除所有初始文本

Question

我正在用 jQuery 编写一个小的显示更多/显示更少脚本。

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;

  var lessText = function() {
    while (el.scrollHeight > el.offsetHeight) {
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  lessText();
  btn.on('click', function(){
  	if($(this).hasClass('show-text')){
    	moreText();
    } else {
    	lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>

这个脚本有一个错误，我很早就能够发现:点击“显示更多”后，整个文本会按预期显示，但是当点击同一个按钮时，“显示less”作为文本，框中只剩下“...”省略号。

我做错了什么？

Answer 1

在 moreText 函数中，您将元素的高度设置为自动:

el.style.height = "auto";

在 lessText 函数中还原它，您将修复您的错误。

el.style.height = null;

function ellipsizeTex(id) {
  var el = document.getElementById(id);
  var btn = $("#undo_truncate");
  var wordArray = el.innerHTML.split(' ');
  var initialHtml = el.innerHTML;
  
  var init = function() {
    while (el.scrollHeight > el.offsetHeight) {
   
      wordArray.pop();
      el.innerHTML = wordArray.join(' ') + '...';
    }
    btn.removeClass('hide-text').addClass('show-text').text("Show more");
  }
  
  var lessText = function() {
    el.style.height = null;
    el.innerHTML = wordArray.join(' ') + '...';   
    btn.removeClass('hide-text').addClass('show-text').text("Show more");    
  }

  var moreText = function() {
    el.innerHTML = initialHtml;
    el.style.height = "auto";
    btn.removeClass('show-text').addClass('hide-text').text("Show less");
  }
  init();
  btn.on('click', function(event) {
     event.preventDefault();
  	if($(this).hasClass('show-text')){
    	moreText();
    } else {
    	lessText();
    }
  });
}

ellipsizeTex('truncared');

#truncared {
  padding: 0 10px;
  background: #fff;
  height: 72px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="subcategory-desc">
  <div id="truncared">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quis aperiam ducimus, ipsa neque, sit illum facilis quas voluptates minus corporis vitae sunt incidunt labore odit quaerat fuga deleniti ex dolores provident consequatur perferendis. Ipsum
      dolores pariatur error voluptate voluptates libero eligendi impedit inventore vero, cupiditate earum obcaecati, minus, ullam reiciendis distinctio dignissimos.</p>
    <p>Voluptatem asperiores exercitationem soluta ipsa magnam ex ipsam voluptatibus minima sequi non, modi vitae assumenda harum nobis mollitia, quis, sed nesciunt blanditiis aperiam ad tenetur totam deserunt, et? A nostrum eveniet, sit et dolores iure quod dolorem, commodi tenetur aspernatur maxime maiores ea fugit quaerat, eius beatae.</p>
  </div>
  <div class="text-center">
    <a href="#" id="undo_truncate" class="show-text btn btn-xs btn-primary">Mai mult</a>
  </div>
</div>