使用JavaScript substring实现查看更多按钮遇问题：仅能隐藏文本无法展开

我来帮你排查下代码里的问题，你的按钮点击后无法展开内容主要是几个常见的JS陷阱和逻辑错误导致的，咱们一步步梳理并修复：

原代码的核心问题 #

• var的闭包陷阱：你用var声明循环变量i，它是函数级作用域，循环结束后i的值会变成pr.length，点击按钮时访问pr[i]就会指向不存在的元素
• 事件绑定错误：btn是querySelectorAll返回的NodeList集合，你直接给btn绑定事件是无效的，应该给每个btn[i]单独绑定
• 原文本丢失：你直接把pr[i].innerHTML替换成截断后的内容，导致完整的原文本被覆盖，点击时根本没有内容可以恢复
• 语法&逻辑错误：showMore函数里的substring(0, )缺少参数，而且逻辑完全搞反了——你需要的是恢复原内容，而不是继续截断

修正后的完整代码 #

<p class="pr">More than 200 characters of text here... (请替换成实际的长文本测试)</p>
<button class="btn">Read more</button>

<script>
// 重命名变量让语义更清晰
const prElements = document.querySelectorAll('.pr');
const btnElements = document.querySelectorAll('.btn');

// 用let声明循环变量，避免闭包问题（ES6+支持）
for (let i = 0; i < prElements.length; i++) {
  const currentPr = prElements[i];
  const currentBtn = btnElements[i];
  const fullText = currentPr.innerHTML;
  const truncatedText = fullText.substring(0, 200) + '...';

  if (fullText.length >= 200) {
    // 初始显示截断文本
    currentPr.innerHTML = truncatedText;
    
    // 绑定点击事件，切换显示状态
    currentBtn.addEventListener('click', function() {
      if (currentPr.innerHTML === truncatedText) {
        currentPr.innerHTML = fullText;
        this.textContent = 'Read less'; // 按钮文字切换为收起
      } else {
        currentPr.innerHTML = truncatedText;
        this.textContent = 'Read more'; // 切回查看更多
      }
    });
  } else {
    // 文本长度不足200时隐藏按钮
    currentBtn.style.display = 'none';
  }
}
</script>

关键改动说明 #

1. 保存原文本：用fullText存储每个元素的完整内容，避免截断后丢失
2. 块级作用域变量：用let声明循环变量i，每个循环迭代都会创建独立的作用域，解决闭包问题（如果需要兼容旧浏览器，可以用立即执行函数IIFE包裹）
3. 正确绑定事件：给每个按钮单独绑定点击事件，确保点击时能正确对应到对应的文本元素
4. 双向切换功能：不仅支持展开，还支持收起，提升用户体验
5. 边界处理：文本长度不足200时自动隐藏按钮，避免无效按钮显示

兼容旧浏览器的写法（如果不用ES6+） #

如果需要兼容不支持let的旧浏览器，把循环改成用立即执行函数保存作用域：

for (var i = 0; i < prElements.length; i++) {
  // 用IIFE保存当前i的值
  (function(index) {
    const currentPr = prElements[index];
    const currentBtn = btnElements[index];
    const fullText = currentPr.innerHTML;
    const truncatedText = fullText.substring(0, 200) + '...';

    if (fullText.length >= 200) {
      currentPr.innerHTML = truncatedText;
      currentBtn.addEventListener('click', function() {
        if (currentPr.innerHTML === truncatedText) {
          currentPr.innerHTML = fullText;
          this.textContent = 'Read less';
        } else {
          currentPr.innerHTML = truncatedText;
          this.textContent = 'Read more';
        }
      });
    } else {
      currentBtn.style.display = 'none';
    }
  })(i);
}

内容的提问来源于stack exchange，提问作者Gurami Nikolaishvili