Question

每个人。最近，我一直在努力通过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>

这是Javascript。

 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";
  }
}

现在，在这种情况下，单击“更多或更少”按钮时将调用myFunction（）。 ID为“更多”的文本被隐藏，点代表可见内容结尾处的一些点。

现在，我希望这种情况发生在具有相同ID或类名的多个段落中。我尝试使用循环来实现这一点，但收到错误“未定义的错误myFunction未定义”。我相信我没有正确设置循环过程。

如果有人可以帮助我找到解决此问题的可行方法，将不胜感激。预先感谢大家。

Answer 1

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

document.querySelectorAll(".showmore").forEach(function (p) {
  p.querySelector("a").addEventListener("click", function () {
    p.classList.toggle("show");
    this.textContent = p.classList.contains("show") ? "Show Less" : "Show More";
  });
});

.showmore {
  font-size: 1.1em;
  margin-top: 1.5em;
}

.showmore .more, .showmore.show .dots {
  display: none
}

.showmore.show .more {
  display: inline
}

.showmore a {
  cursor: pointer;
  display: block;
  margin-top: 0.5em;
  margin-bottom: 1em;
  font-weight: bold;
}

<p class="showmore">This is Lorem Ipsum. This is Lorem Ipsum. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

<p class="showmore">And here is a second paragraph. <span class="dots">...</span><span class="more"> This is the hidden text. This is the hidden text. </span>
  <a>Show More</a>
</p>

代码首先循环遍历所有段落，然后在内部抓取<a>并分配单击处理程序。

如何使用getElementsById或ClassName通过Javascript添加几个“更多”和“更少”按钮？

1 个答案: