只有在满足设定的字符数量时，才将“显示更多”链接附加到截断的段落

我想将“显示更多”链接（如果点击将显示已修剪/隐藏的内容）附加到我的段落，只有在传递了X个字符数量时。

例如，我将最小值设置为120个字符，而段落只有60个，因此我不需要附加“显示更多”链接。

我该如何解决？ 下面的代码工作得很好但是会对我所拥有的任何段落应用“显示更多”，即使它少于X量。我该怎么办？

https://jsfiddle.net/vm0uj7fc/1/

var charLimit = 122; function truncate(el) { var clone = el.children().first(), originalContent = el.html(), text = clone.text(); el.attr("data-originalContent", originalContent); clone.text(text.substring(0, charLimit) + "...") el.empty().append(clone); } function reveal(el) { el.html(el.attr("data-originalContent")); } $("a").on("click", function (e) { e.preventDefault(); var truncateElement = $(this).parent().prev().find(".truncate"); if ($(this).text() === "Read More") { $(this).text("Read Less"); reveal(truncateElement); } else { $(this).text("Read More"); truncate(truncateElement); } }); $(".truncate").each(function () { truncate($(this)); }); 

回顾一下：

• 我需要动态地附加“read more”（.append函数？）
• 检查字符，如果少于最大数量，则不显示更多信息
• 可选，如果有人可以提出纯Javascript，这将是首选的选择，如果不是我可以从我上面的代码开始的一些代码重构

Answer 1

我写了一个处理你的请求的纯JavaScript，请看这里的演示： https ： //jsfiddle.net/IA7medd/751sLn0n/

HTML：

 
 
 
Event Title
 
 
 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
 
 
 
 
 Not enough characters here to show/append the "Read more" link 
 
 
 
 
 
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
 
 
  

样式：

 .toggledText span.trimmed{ display:none; } .read-more .more:before{ content:'Read More'; } .showAll .toggledText span.morePoints{ display:none; } .showAll .toggledText span.trimmed{ display:inline; } .showAll .read-more .more:before{ content:'Read Less'; } 

脚本：

 var charLimit = 120; var numberOfToggled = document.getElementsByClassName('toggledText'); for(i=0; i charLimit){ var showStr = elText.slice(0,charLimit); var hideStr = elText.slice(charLimit); el.innerHTML = showStr + '... ' + hideStr + ''; el.parentElement.innerHTML = el.parentElement.innerHTML + "
"; } } window.onclick = function(event) { if (event.target.className == 'more') { event.preventDefault(); event.target.parentElement.parentElement.classList.toggle('showAll'); } } 

---

我还对你的代码进行了一些编辑，它运行正常。 你可以在这里看到它： https ：//jsfiddle.net/IA7medd/j78L76qj/（如果你的话）

Answer 2

我已经对你的代码进行了一些更改。我已经列出了我帮助你理解的approch

1. 遍历每个.truncate
2. 检查总字符长度是否超过122;
3. 如果为true删除类normHeight并添加类modHeight
4. 点击链接后删除modHeight并添加类’normHeight’

以下代码段可能很有用

 var charLimit = 122; function _truncate(el) { var _clone = el.children().first(); //Removing white space & checking length // _clone[0] because _clone is array of jquery object if(_clone[0].innerHTML.trim().length>charLimit){ _clone.removeClass('normHeight').addClass('modHeight'); //Appending read me link el.append($("
Read More")); } } // Since a.more is dynamic element so using event delegation. $("body").on("click",'a.more',function (e) { e.preventDefault(); $(this).parent().siblings('p.modHeight').removeClass('modHeight').addClass('normHeight'); $(this).hide(); // Once entire text is visible remove read me link }); $(".truncate").each(function () { _truncate($(this)); }); 

另请注意HTML和CSS的微小变化

检查这个jsfiddle进行演示

Answer 3

我已将你的js改为追随者，并且它的工作正常。 我在更改的行后添加了注释。

 var charLimit = 122; function truncate(el) { var shortText = $('
'), //create new 
 instead of clone originalContent = el.html(), text = el.text().trim(); // take all text & trim starting and trailing white spaces if (text.length > charLimit) { //check char limit overflow el.next(".read-more").length || el.after('
Read More'); //append "Read More" button if not exist el.attr("data-originalContent", originalContent); shortText.text(text.substring(0, charLimit) + "...") el.html(shortText); // use html() instead of empty() and append() } } function reveal(el) { el.html(el.attr("data-originalContent")); } $(".container").on("click", ".more", function (e) { //use delegated event for dynamically added "Read More" button e.preventDefault(); var truncateElement = $(this).parent().prev(".truncate"); //change here as we added "Read More" button after ".truncate" if ($(this).text() === "Read More") { $(this).text("Read Less"); reveal(truncateElement); } else { $(this).text("Read More"); truncate(truncateElement); } }); $(".truncate").each(function () { truncate($(this)); }); 

工作演示

Answer 4

我刚给你的代码添加了一小部分内容

 $(".truncate").each(function(){ if($(this).length < 122) { $(this).parent().next().find(".read-more").hide(); } }); 

并改变了这一点

 function truncate(el) { var clone = el.children().first(), originalContent = el.html(), text = clone.text(); if(text.length>charLimit) { el.attr("data-originalContent", originalContent); clone.text(text.substring(0, charLimit) + "...") el.empty().append(clone); } } 

更新小提琴