javascript - 更改 div 中的文本

Question

假设我的 div 中有以下文本

<div id="textbox">
  <p>Foo</p>
  <br>
  <p>Bar</p>
  <a href="#" id="changetext">change text</a>
<div>

点击更改文本按钮，我希望文本成为原样，点击“更改为旧”，我希望它再次切换到旧文本。

<div id="textbox">
  <p>Lorem</p>
  <br>
  <p>Ipsum</p>
  <a href="#" id="changetext">change to old one</a>
<div>

在 css 和 javascript 的帮助下，当前的方法是否真的可行，或者我是否必须以不同的方式构建我的 html？如果目前的方法可行，如何实现？

Answer 1

如果您正在寻找文本旋转器，您可以这样做。

window.onload = function () {
  var current = 0;
  var ps = document.querySelectorAll("p");
  for (var i = 0; i < ps.length; i++) {
    ps[i].style.display = 'none';
  }
  ps[current%ps.length].style.display = 'block';
  document.querySelector("a").onclick = function () {
    ps[current%ps.length].style.display = 'none';
    current++;
    ps[current%ps.length].style.display = 'block';
    return false;
  };
};

<div id="texts">
  <p>Saying 1... No #1...</p>
  <p>Saying 2... No #2...</p>
  <p>Saying 3... No #3...</p>
  <p>Saying 4... No #4...</p>
  <p>Saying 5... No #5...</p>
</div>
<a href="#">Rotate</a>

已更新。现在这段代码非常可扩展。有任意数量的 <p>标签，它将起作用。您无需更改 JavaScript。只有 HTML，你可以添加/删除。如果这有效，请告诉我。我没用过jquery ! 😇