Question

我们说我的div中有以下文字

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

并点击更改文字按钮我想要文字，然后点击＆＃34;更改为旧＆＃34;我希望它再次切换到旧文本。

<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！

Answer 2

<div id="textbox">
  <p id = 'p1'>Foo</p>
  <br>
  <p id = p2>Bar</p>
  <a onclick = "chng();" href= # id ="changetext">change text</a>
  <a onclick = "chngback();" href= # id ="changeback" style = "display:none;">change text back</a>

</div>
<script>
function chng(){
    var x;
    x = document.getElementById('p1');
    x.innerHTML = 'Changed';
    y = document.getElementById('p2');
    y.innerHTML = 'Changed also';
    z = document.getElementById('changetext');
    z.style.display = "none";
    w = document.getElementById('changeback');
    w.style.display = 'block';
}
function chngback(){
    var x;
    x = document.getElementById('p1');
    x.innerHTML = 'Foo';
    y = document.getElementById('p2');
    y.innerHTML = 'Bar';
    z = document.getElementById('changetext');
    z.style.display = "block";
    w = document.getElementById('changeback');
    w.style.display = 'none';
}
</script>

您可以使用此代码更改文本并将其更改为

之前的版本

更改div中的文本

2 个答案: