установить максимальное количество символов в абзаце - PullRequest
Новая
       40

установить максимальное количество символов в абзаце

0 голосов
/ 28 ноября 2018

Привет, ребята. Я пытался настроить maxLength для моего p, используя GetElementbyClassName, и это не работает?У тебя есть идея?пожалуйста 

<td class="tabQuot-col-06">
    <p class="MaxDescription" style="display: inline-block;">PACKING PREFORMED</p>
    <a href="#" data-toggle="tooltip" data-placement="right" title="PACKING PREFORMED" class="tooltip-custom icon-fi-info" data-original-title="PACKING PREFORMED"></a>
    </td>  

    <script>
    function truncateText(selector, maxLength) {
            var element = document.getElementsByClassName(selector),
                truncated = element.innerText;

            if (truncated.length > maxLength) {
                truncated = truncated.substr(0, maxLength) + '...';
            }
            return truncated;
         }
        document.getElementsByClassName('MaxDescription').innerText = 
        truncateText('MaxDescription', 3);
</script>

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

это моя первая попытка ответа.

Вы получаете "undefined" для element.innerText.Это связано с тем, что использование document.getElementsByClassName (selector) возвращает массив элементов.Если вы хотите продолжить использовать getElementsByClassName, измените свой код на «element [0] .innerText» или выполните итерацию по элементам, если вы хотите вызвать функцию для каждого элемента этого класса.

В противном случае выможно изменить «MaxDescription» с класса на id и использовать document.getElementByID.

Изменить это: 

            var element = document.getElementsByClassName(selector),
            truncated = element.innerText;

На Это: 

            var element = document.getElementsByClassName(selector),
            truncated = element[0].innerText;

Для перебора всехэлементы этого класса: 

            // for iterating through each:
            for(int i = 0; i < element.length < i++){
              var truncated = element[i].innerText;
              if (truncated.length > maxLength) {
                  element[i].innerText = truncated.substr(0, maxLength) + '...';
              }
            }

Устанавливает innerText всех элементов внутри самого цикла, так что нет необходимости возвращать что-либо из функции.

Вот плункер, показывающий различныеварианты реализации, которые вы могли бы рассмотреть.

https://plnkr.co/edit/o7ELqTQQukSmpcjbO210?p=preview

Надеюсь, это поможет, по крайней мере, немного.

0 голосов
/ 28 ноября 2018

После того, как anwsers, которые мне очень помогают:
Это мой окончательный код: 

function truncateText(selector, maxLength) {
    var element = document.getElementsByClassName(selector),
        truncated = element[0].innerText;
    for (var i = 0; i < element.length; i++) {
         var truncated = element[i].innerText;
         if (truncated.length > maxLength) {
              element[i].innerText = truncated.substr(0, maxLength) + '...';
            }
         }
      }
truncateText('MaxDescription', 3);
0 голосов
/ 28 ноября 2018

getElementsByClassName возвращает коллекцию элементов, а не один элемент.

Вам необходимо настроить таргетинг на первый элемент, используя [0], поскольку массив JavaScript равен 0-based.
Если вы хотите применить этот скрипт ко всем вашим MaxDescription элементам, вам нужно будет использовать цикл вместо. 

function truncateText(selector, maxLength) {
  var element = document.getElementsByClassName(selector)[0],
      truncated = element.innerText;

  if (truncated.length > maxLength) {
    truncated = truncated.substr(0, maxLength) + '...';
  }
  return truncated;
}
document.getElementsByClassName('MaxDescription')[0].innerText = truncateText('MaxDescription', 3);
<td class="tabQuot-col-06">
    <p class="MaxDescription" style="display: inline-block;">PACKING PREFORMED</p>
    <a href="#" data-toggle="tooltip" data-placement="right" title="PACKING PREFORMED" class="tooltip-custom icon-fi-info" data-original-title="PACKING PREFORMED"></a>
  </td>
...