Question

如果我错误地解决了这个问题，或者之前已经被问过并回答过，我的道歉，我的搜索出现了类似的Q＆amp; A基于JQuery，我正在寻找纯JavaScript解决方案。

var len = 100;
var p = document.getElementById('shrinkMe');
if (p) {

 var trunc = p.innerHTML;
 if (trunc.length > len) {

trunc = trunc.substring(0, len);
trunc = trunc.replace(/\w+$/, '');

trunc += '<a href="#" ' +
  'onclick="this.parentNode.innerHTML=' +
  'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
  'Read More<\/a>';
p.innerHTML = trunc;
  }
}

JSFiddle

这个小提琴用JavaScript截断文本，但是在它的当前状态下它是单次出现的，这不是我需要的。我在html的主体中多次出现'shrinkMe'作为div id，并且使用.getElementById这需要调整，因为当点击“Read More”时它会同时扩展所有出现的时刻。我相信更改为.getElementsByClassName可能是一种解决方案，使我能够多次出现一个类名，而不是仅限于.getElementById的一个实例。但我不确定如何进行切换。

我也在寻找一个可点击的“Read Less”，一旦点击“Read More”，“Read Less”将文本恢复为截断状态，“Read More”再次可见等等。

总之，我正在寻求帮助：

将.getElementById切换为.getElementsByClassName
添加“阅读更少”以显示帖子“阅读更多”点击。

感谢您花时间阅读此内容 - 抱歉，如果我无意中无意中不清楚的话。如果是这样，请告诉我，我会尝试进一步解释。

Answer 1

所以，一些人对此的直接反应可能是＆＃34;去jquery所以你可以轻松地查询父母，兄弟姐妹等等，等等等等等等等。我已经抵制并用纯JS做了（很有趣）。

我改变了两件大事：

我已将隐藏文字存储在父段落标记下方的隐藏段落中。这样我们就不必拥有一些包含隐藏文本的全局JS变量;我宁愿在DOM上存储这样的东西。像这样：
```
<span id="parent1">Some text<span class="hidden">Hidden overflow text</span></span>
```

我已经给出了相关的锚标签和隐藏的段落标签，这些标签与彼此相关的ID相对应。因此，您将收缩，缩减MeOverflow，收缩MeMoreLink，收缩MeLessLink。这样可以更轻松地对相关内容进行分组。这可能是渲染时间的考虑因素，但对于此示例并保留原始代码，我已通过替换innerHtml来完成它。你会在这个循环中看到它：

for (var i = 0; i < shrinkables.length; i++){
    var fullText = shrinkables[i].innerHTML;
    if(fullText.length > len){
        var trunc = fullText.substring(0, len).replace(/\w+$/, '');
        var remainder = "";
        var id = shrinkables[i].id;
        remainder = fullText.substring(len, fullText.length);
        shrinkables[i].innerHTML = '<span>' + trunc + '<span class="hidden" id="' + id + 'Overflow">'+ remainder +'</span></span>&nbsp;<a id="' + id + 'MoreLink" href="#!" onclick="showMore(\''+ id + '\');">More</a><a class="hidden" href="#!" id="' + id + 'LessLink" onclick="showLess(\''+ id + '\');">Less</a>';
    }
}

以下是完整的小提琴：http://jsfiddle.net/oxfb3wjs/3/

如果您有任何疑问，请与我们联系。希望我帮忙！

编辑：另外，你会在小提琴中看到我确实使用了你想要的getElementsByClassName。我忘了触及它，但它就像循环返回的元素一样简单。（见小提琴）

Answer 2

我尝试使用简单的HTML和Javascript。

一个简单的showParagraph函数，该函数使用更多/更少的支持来呈现给定的字符串。它支持文本的动态长度。您可以设置默认情况下要显示多少个字符。

showParagraph(targetId, paragraphText, displayLimit);

在这里

paragraphText表示您要使用“阅读更多” /“阅读较少”功能加载的文本。

targetId表示要在其中加载此文本的HTML元素的ID。

displayLimit表示您希望默认显示多少个字符。

请查看下面的小提琴：https://jsfiddle.net/yash_mochi/5d72zbsf/7/

使用JavaScript截断文本＆＃34;阅读更多＆＃34;和＃34;阅读更少＆＃34;

2 个答案: