Пользовательская функция усечения удаляет весь исходный текст - PullRequest
Новая
       8

Пользовательская функция усечения удаляет весь исходный текст

0 голосов
/ 27 июня 2018

Я работаю над небольшим Показать больше / показать меньше скрипт в 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>

В этом скрипте есть ошибка, которую я смог обнаружить: после нажатия «Показать больше» весь текст отображается, как и предполагалось , но при нажатии на ту же кнопку, с «Показать меньше». «как текст на этот раз, все, что остается в рамке, это« ... »эллипсы.

Что я делаю не так?

1 Ответ

0 голосов
/ 27 июня 2018

В функции moreText вы устанавливаете высоту элемента на auto: 

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