javascript - 使用带有 "Read More"和 "Read Less"的 JavaScript chop 文本

Question

如果我错误地提出了这个问题，或者如果之前有人提出并回答过这个问题，我深表歉意，我的搜索出现了类似的基于 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

fiddle 会用 JavaScript chop 文本，但在当前状态下，它只出现一次，这并不是我所需要的。我在我的 html 正文中多次出现作为 div id 的“shrinkMe”，并且由于使用了 .getElementById，这需要进行调整，因为在单击“阅读更多”时它会同时展开所有事件。我相信更改为 .getElementsByClassName 可能是使我能够多次出现类名的解决方案，而不是仅限于 .getElementById 的一个实例，但我不确定如何进行切换。

我也在寻找一个可点击的“Read Less”，一旦点击“Read More”就会显示，“Read Less”将文本返回到 chop 状态，然后“Read More”再次可见等等。

总而言之，我请求的帮助是:

1. 将 .getElementById 改为 .getElementsByClassName
2. 添加“Read Less”以显示帖子“Read More”点击。

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

Answer 1

因此，有些人对此的直接 react 可能是“使用 jquery，这样您就可以轻松查询 parent 、 sibling 等，等等等等”。我一直拒绝并用纯 JS 完成(这很有趣)。

我改变了两个主要的东西:

1. 我已将您的隐藏文本存储在父段落标签下的隐藏段落中。这样我们就不必使用一些全局 JS 变量来保存您的隐藏文本；我宁愿将这样的东西存储在 DOM 上。像这样:

   <span id="parent1">Some text<span class="hidden">Hidden overflow text</span></span>
   

2. 我已经给相关的 anchor 标签和隐藏的段落标签相互关联了相应的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>&nbsp;<a id="' + id + 'MoreLink" href="#!" onclick="showMore(\''+ id + '\');">More</a><a class="hidden" href="#!" id="' + id + 'LessLink" onclick="showLess(\''+ id + '\');">Less</a>';
       }
   }
   

这是完整的 fiddle :http://jsfiddle.net/oxfb3wjs/3/

如果您有任何问题，请告诉我。希望我有所帮助!

编辑:此外，您会在 fiddle 中看到我确实按照您的意愿使用了 getElementsByClassName。我忘了谈这个，但这就像循环返回的元素一样简单。 (见 fiddle )