如果我错误地提出了这个问题，或者如果之前有人问过并回答过这个问题，我很抱歉，我的搜索发现了类似的基于 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 http://jsfiddle.net/f484126/dx7w8jb2
小提琴用 JavaScript 截断文本，但在当前状态下，它只出现一次，这并不是我所需要的。我在 html 正文中多次出现“shrinkMe”作为 div id，并且使用 .getElementById 时，需要对此进行调整，因为单击“阅读更多”时它会同时展开所有出现的情况。我相信更改为 .getElementsByClassName 可能是一种解决方案，使我能够多次出现某个类名，而不是仅限于 .getElementById 的一个实例，但我不确定如何进行切换。
我还希望在单击“阅读更多”后显示可点击的“少读”，“少读”将文本返回到截断状态，然后“阅读更多”再次可见，依此类推。
总之，我请求帮助：
- 将 .getElementById 切换为 .getElementsByClassName
- 添加“阅读较少”以显示帖子“阅读更多”点击。
感谢您花时间阅读本文 - 抱歉，如果我无意中不清楚。如果是这样，请告诉我，我会尽力进一步解释。
所以，有些人对此的第一反应可能是“去jquery，这样你就可以轻松查询父母、兄弟姐妹等，等等等等”。我已经抵制并用纯 JS 完成了它（这很有趣）。
我改变了两件主要的事情：
-
我已将您的隐藏文本存储在父段落标记下方的隐藏段落中。这样我们就不必使用一些全局 JS 变量来保存隐藏文本；我宁愿将这样的东西存储在 DOM 上。像这样：
<span id="parent1">Some text<span class="hidden">Hidden overflow text</span></span>
-
我已经给出了彼此相关的相关锚标记和隐藏段落标记对应的ID。所以你将有shrinkMe、shrinkMeOverflow、shrinkMeMoreLink、shrinkMeLessLink。这使得对相关事物进行分组变得更容易。这可能是渲染时间的考虑因素，但对于这个示例并保留原始代码，我通过替换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> <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/ http://jsfiddle.net/oxfb3wjs/3/
如果您有任何疑问，请告诉我。希望我有帮助！
编辑：另外，您会在小提琴中看到我确实像您想要的那样使用了 getElementsByClassName 。我忘了提及这一点，但它就像循环返回的元素一样简单。 （参见小提琴）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
