在段落上设置最大字符数

Question

大家好，我尝试使用 GetElementsbyClassName 将 maxLength 设置到我的电脑，但它不起作用？你有好主意吗？请

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

Answer 1

getElementsByClassName returns 元素的集合，而不是单个元素。

您需要使用 [0] 定位您的第一个元素，因为 JavaScript 数组是从 0 开始的。
如果您想将此脚本应用于所有 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>

Answer 2

这是我第一次尝试回答。

您将获得 "undefined" element.innerText。这是因为使用 document.getElementsByClassName(selector) returns 元素数组。如果您想继续使用 getElementsByClassName，请将您的代码更改为 "element[0].innerText"，或者如果您想在 class.

的每个元素上调用该函数，则迭代这些元素

否则，您可以将"MaxDescription"从class更改为id，并使用document.getElementByID。

改变这个：

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

为此：

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

用于遍历 class 的所有元素：

            // 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，因此不需要 return 函数中的任何内容。

这是一个 plunker，显示了您可以考虑的不同实施选项。

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

希望这至少能有所帮助。

Answer 3

回答后对我帮助很大：
这是我的最终代码：

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

在段落上设置最大字符数

setup max characters on paragraph

javascript

getelementbyid

maxlength

getelementsbyclassname