使用带有“阅读更多”的JavaScript截断文本和“少阅读” [英] Truncate Text with JavaScript with "Read More" and "Read Less"

问题描述

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

My apologies if I've framed this question incorrectly or if it's been asked and answered previously, my search turned up similar Q&A's which were based around JQuery and I'm looking for a pure JavaScript solution.

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的一个实例，但我不确定如何进行切换。

The fiddle truncates text with JavaScript, however in it's current state it's for a single occurrence which isn't quite what I need. I have multiple occurrences of 'shrinkMe' as a div id in the body of my html and as .getElementById is used this will need to be tweaked as at the moment when "Read More" is clicked it expands all occurrences simultaneously. I believe that changing to .getElementsByClassName may be the solution to enable me to have multiple occurrences of a class name opposed to being restricted to one instance of .getElementById but I'm unsure quite how to make the switch.

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

I'm also looking for a clickable "Read Less" to be shown once "Read More" is clicked, with "Read Less" returning the text back to the truncated state, with "Read More" then being visible once again and so on.

总之，我正在寻求帮助：

In summary I'm asking for assistance to:

1. 将.getElementById切换为.getElementsByClassName


2. 添加Read Less以显示帖子Read Moreclick。

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

Thanks for taking the time to read this - sorry if I've been unintentionally unclear in anyway. If so please let me know and I'll try to explain further.

推荐答案

因此，有些人可能会立即对此作出反应去jquery所以你可以很容易地查询父母，兄弟姐妹等等，等等等等等等。我已经抵制并在纯JS中完成它（很有趣）。

So, some people's immediate reaction to this would probably be "go to jquery so you can easily query parents, siblings, etc, blah blah blah". I've resisted and done it in pure JS (it was fun).

我改变了两件大事：

1. 我已将隐藏文本存储在父段落标记下方的隐藏段落中。这样我们就不必拥有一些包含隐藏文本的全局JS变量;我宁愿在DOM上存储这样的东西。像这样：

1. I've stored your hidden text in a hidden paragraph underneath the parent paragraph tag. This is so we don't have to have some global JS variable holding your hidden text; I'd rather store things like this on the DOM. Like this:

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

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

I've given the relevant anchor tags and hidden paragraph tags related to each other corresponding IDs. So you'll have shrinkMe, shrinkMeOverflow, shrinkMeMoreLink, shrinkMeLessLink. This makes it easier to group related things. This may be a consideration for render-time, but for this example and preserving your original code, I've done it by replacing the innerHtml. You'll see that in this loop:

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/

如果您有任何疑问，请告诉我。希望我帮忙！

Let me know if you have any questions. Hope I helped!

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

Also, you'll see in the fiddle that I did use getElementsByClassName like you wanted to. I forgot to touch on that, but it's as simple as looping through the returned elements. (see fiddle)

这篇关于使用带有“阅读更多”的JavaScript截断文本和“少阅读”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！