小编f48*_*126的帖子

用"阅读更多"和"少阅读"用JavaScript截断文本

如果我错误地设置了这个问题,或者之前已经被问过并回答过,我的道歉,我的搜索出现了类似于QQuery的问答,而我正在寻找一个纯粹的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;
  }
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

小提琴用JavaScript截断文本,但是在它的当前状态下它只是一次出现,这不是我需要的.我在html的主体中多次出现'shrinkMe'作为div id,并且当使用.getElementById时,需要调整它,因为当点击"Read More"时它会同时扩展所有出现的时刻.我相信更改为.getElementsByClassName可能是一个解决方案,使我能够多次出现一个类名,而不是被限制为.getElementById的一个实例,但我不确定如何进行切换.

我也在寻找一个可点击的"Read Less",一旦点击"Read More","Read Less"将文本返回到截断状态,"Read More"再次可见,依此类推.

总之,我正在寻求帮助:

  1. 将.getElementById切换为.getElementsByClassName
  2. 添加"阅读更少"以显示帖子"阅读更多"点击.

感谢您花时间阅读此内容 - 抱歉,如果我无意中无意中也不清楚.如果是这样,请告诉我,我会尝试进一步解释.

javascript

3
推荐指数
1
解决办法
2080
查看次数

标签 统计

javascript ×1