Question

嗨，我尝试使用GetElementbyClassName将maxLength设置为我的p，这行不通吗？你有想法吗？请

<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返回元素的集合，而不是单个元素。

您需要使用[0]定位第一个元素，因为JavaScript数组基于0。
如果您想将此脚本应用于所有MaxDescription元素，则需要使用Loop。

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

这是我的第一次尝试。

您正在获得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

希望这至少会有所帮助。

Answer 3

在帮助了我很多的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);

在段落上设置最大字符

3 个答案: