Javascript 截断文本并通过“阅读更多”链接展开文本

任何帮助或指导都将不胜感激

我已经编写了一个简单的脚本，用于在一定长度后截断文本，它显示了一个扩展截断文本的链接

除了文本之外，一切都正常，我不知道为什么

我已经将脚本上传到JS Fiddle

---

你的expand_text方法真的没有任何作用。您需要保留原始文本的引用，然后使用它来更改它

'use strict';
window.addEventListener('load', () => {
    let intro = new ShowMore('description', 'read_more', 300);
});
function ShowMore(e, l, stop) {
    this.e = document.getElementById(e);
    this.stop = stop;
    this.l = document.getElementById(l);
    // 1. Keep a reference of your original string
    this.originalTxt = this.e.innerText;

    this.l.addEventListener('click', (e) => {
      this.expand_text();
      e.preventDefault();
      e.stopPropagation();
    });

    this.get_length = () => {
        return this.e.innerText.length;
    };

    this.hide_text = () => {
      this.e.innerText = this.e.innerText.substr(0, this.stop) + '\u2026';
      this.l.style.display = 'inline';
      this.e.appendChild(this.l);
    }
    // 2. revert to original text, stored in local variable
    this.expand_text = () => {
      this.e.innerText = this.originalTxt;
    }

    this.show = () => {
    return (this.get_length() > this.stop) ? this.hide_text() : this.expand_text();
    };

    this.show();
};

---

expand_text

函数中唯一的语句是

this.e.innerText，这将不起任何作用

您应该在截断之前存储描述字符串的原始值，并使用它来显示全文


“严格使用”；
window.addEventListener（'load'，（）=>{
let intro=new ShowMore（'description'，'read_more'，300）；
});
功能显示更多（e、l、停止）{
this.e=document.getElementById（e）；
this.eText=this.e.innerText；
this.stop=停止；
this.l=document.getElementById（l）；
this.l.addEventListener（'click'，（e）=>{
这个。展开_text（）；
e、 预防默认值（）；
e、 停止传播（）；
});
this.get_length=（）=>{
返回此.e.innerText.length；
};
this.hide_text=（）=>{
this.e.innerText=this.e.innerText.substr（0，this.stop）+'\u2026'；
this.l.style.display='inline'；
本.e.儿童（本.l.）；
}
this.expand_text=（）=>{
this.e.innerText=this.eText；
}
this.show=（）=>{
返回（this.get_length（）>this.stop）？this.hide_text（）：this.expand_text（）；
};
this.show（）；
};
显示更多/更少
Lorem ipsum door sit amet，一位杰出的领导者。变形金刚
康莫多。埃涅亚的兽人分子在入侵前就已经灭绝了。莫里斯·ac·布兰迪特·莫里斯。酒后驾车
射手座，射精和射精。在洛雷姆的尼布，帕特·维韦拉·埃吉特·马莱苏阿达·埃尼姆。口诀
比本杜姆门酒店
感谢您的快速回复！你是绝对正确的，我用你的建议修改了我的代码，它立即起作用了。我犯了一个多么愚蠢的错误。我非常感谢你的意见。每个人都会遇到这种情况：）谢谢你的帮助-你和阿劳都是绝对正确的。我非常感谢你的支持和投入。
'use strict';
window.addEventListener('load', () => {
    let intro = new ShowMore('description', 'read_more', 300);
});
function ShowMore(e, l, stop) {
    this.e = document.getElementById(e);
    this.stop = stop;
    this.l = document.getElementById(l);
    // 1. Keep a reference of your original string
    this.originalTxt = this.e.innerText;

    this.l.addEventListener('click', (e) => {
      this.expand_text();
      e.preventDefault();
      e.stopPropagation();
    });

    this.get_length = () => {
        return this.e.innerText.length;
    };

    this.hide_text = () => {
      this.e.innerText = this.e.innerText.substr(0, this.stop) + '\u2026';
      this.l.style.display = 'inline';
      this.e.appendChild(this.l);
    }
    // 2. revert to original text, stored in local variable
    this.expand_text = () => {
      this.e.innerText = this.originalTxt;
    }

    this.show = () => {
    return (this.get_length() > this.stop) ? this.hide_text() : this.expand_text();
    };

    this.show();
};