「查看更多」按钮显示错误内容问题排查求助

我来帮你分析下这个问题，其实是你的JavaScript代码里几个关键细节没处理好导致的：

问题根源 #

• querySelector 只会匹配第一个元素：你代码里用document.querySelector(".dots")和document.querySelector(".read-more")，每次都会选中页面上第一个符合选择器的元素（也就是左侧评价里的那些），所以不管点哪个按钮，都是在操作左侧的评价内容。
• 循环里定义函数毫无意义：你把readMore函数放在了for循环内部，这不仅不会让每个评价绑定独立的函数，反而会重复覆盖这个函数，最后还是只有一份函数生效。
• 没有建立按钮与对应评价的关联：每个按钮应该只操作自己相邻的那条评价里的元素，而不是全局查找。

修复方案 #

方案1：给按钮绑定对应上下文（简单直接） #

先修改HTML里的按钮，把当前按钮元素传递给readMore函数，然后在函数里基于这个按钮找到对应的评价内容：

修改后的HTML

<!-- 左侧评价 -->
<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="readMore(this)" class="read-more-btn">Read More</button>

<!-- 右侧评价 -->
<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button onclick="readMore(this)" class="read-more-btn">Read More</button>

修改后的JavaScript

function readMore(btn) {
  // 通过按钮找到它前面的评价段落
  const targetParagraph = btn.previousElementSibling;
  // 在当前段落内查找对应的元素，而非全局查找
  const dots = targetParagraph.querySelector(".dots");
  const moreText = targetParagraph.querySelector(".read-more");
  
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btn.innerHTML = "Read More";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btn.innerHTML = "Read Less";
    moreText.style.display = "inline";
  }
}

方案2：事件委托（更适配动态内容） #

如果以后你可能会动态添加新的评价条目，推荐用事件委托的方式，不用给每个按钮单独绑定onclick：

修改后的HTML（去掉onclick属性）

<!-- 左侧评价 -->
<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

<!-- 右侧评价 -->
<p class="test-paragraph dark-grey-text mt-4"><i class="fas fa-quote-left pr-2"></i>"Harrison has been continually knowledgeable, patient, professional, and overall a fantastic help. He is clearly well informed in the digital marketing and web design field.<span class="dots">...</span><span class="read-more"> He always gives timely responses which are clear and helpful. The finished site looks professional and inviting – just what I wanted. I will recommend him to my colleagues. Thanks again, Harri."</span></p>
<button class="read-more-btn">Read More</button>

修改后的JavaScript

// 监听整个文档的点击事件
document.addEventListener('click', function(e) {
  // 判断点击的元素是否是查看更多按钮
  if (e.target.classList.contains('read-more-btn')) {
    const btn = e.target;
    const targetParagraph = btn.previousElementSibling;
    const dots = targetParagraph.querySelector(".dots");
    const moreText = targetParagraph.querySelector(".read-more");

    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btn.innerHTML = "Read More";
      moreText.style.display = "none";
    } else {
      dots.style.display = "none";
      btn.innerHTML = "Read Less";
      moreText.style.display = "inline";
    }
  }
});

两种方案都能解决你的问题，方案1适合静态内容，方案2更灵活，推荐根据你的实际需求选择~

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