用「Read More」和「Read Less」截斷帶JavaScript的文本

Question

如果我錯誤地構造了這個問題，或者如果之前已經詢問和回答過，我的搜索類似Q & 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 More」時顯示的可點擊的「Read Less」，並且「Read Less」將文本返回到截斷狀態，「Read More」顯示一次再次等等。

總之我所要求的援助：

1. 開關.getElementById到.getElementsByClassName
2. 添加「讀少」，以示後「瞭解更多」點擊。

感謝您抽出寶貴時間閱讀本文 - 抱歉，如果我無意中無意中弄錯了。如果是這樣，請讓我知道，我會嘗試進一步解釋。

Answer 1

所以，一些人對此的直接反應可能是「去jquery，這樣你可以很容易地查詢父母，兄弟姐妹等等等等等等等等等等等等等等等等等等。我抵制並以純JS完成它（很有趣）。

我已經改變了兩個主要方面：

1. 我已經存儲在父段落標記下方的隱藏的段落你的隱藏文字。這是因爲我們不必擁有一些全局JS變量來保存隱藏文本;我寧願在DOM上存儲這樣的東西。就像這樣：

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

2. 我已經給相關的錨標籤和相互關聯的相應的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>'; 
       } 
   } 
   

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

讓我知道如果您有任何問題。希望我幫助！

編輯：另外，你會在小提琴中看到我確實使用了getElementsByClassName。我忘記了談論這一點，但它就像循環返回的元素一樣簡單。（見小提琴）