如何使用getElementsById或ClassName通过Javascript添加多读和少读按钮？

各位。最近，我一直在努力通过Javascript添加“阅读更多”和“阅读更少”按钮。通过选取一个特定元素的ID，我只能对其执行一次。但是，我希望对其他几个类似的元素执行几次。我尝试将ID或类名存储在一个变量中，然后在其中循环，但它不起作用。请看一下Javascript代码，并建议如何为其他几个元素实现相同的功能。下面是一个工作正常的元素的代码。我想把它写几个段落。这是HTML

  <p style="font-size:1.1em; margin-top:25px; margin-bottom:15px;">This is Lorem Ipsum. This is Lorem Ipsum. <span id="dots">...</span> <span style="display:none;" id="more"> This is the hidden text. This is the hidden text. </span> 
 </p>
 <a id="myBtn" style="cursor:pointer; margin-bottom:1em; font-weight:bold;" onclick="myFunction()">Show More</a>         

现在，在本例中，当单击“读取更多”或“读取更少”按钮时，将调用myFunction。ID为“more”的文本被隐藏，点表示可见内容末尾的一些点

现在，我希望在具有相同ID或类名的多个段落中发生这种情况。我尝试使用循环来实现这一点，但是没有定义获取错误uncaughterrormyfunction。我认为我没有正确设置循环过程

---

如果有人能帮我找到一个可行的解决方案，我将不胜感激。提前向大家表示感谢

您可以使用一些CSS切换类以显示/隐藏跨度，如下所示：

document.queryselectoral.showmore.foreachp函数{ p、 querySelectora.addEventListenerclick，函数{ p、 classList.toggleshow； this.textContent=p.classList.containsshow？显示较少：显示更多； }; }; .showmore{ 字体大小：1.1米； 边缘顶部：1.5em； } .showmore.more.showmore.show.dots{ 显示：无 } .showmore.show.more{ 显示：内联 } .showmore a{ 光标：指针； 显示：块； 边缘顶部：0.5em； 边缘底部：1米； 字体大小：粗体； }

这是Lorem Ipsum。这是Lorem Ipsum。。。这是隐藏的文本。这是隐藏的文本。 显示更多

这里是第二段。。。这是隐藏的文本。这是隐藏的文本。 显示更多

---

感谢您的解决方案。它工作得非常好。我对它做了一些小的调整，这样如果段落中有多个“a”元素，它仍然有效。我真的很喜欢你代码的紧凑性。再次感谢你。

 function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

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