ändern Text in div

Question

Sagen wir, ich habe folgende Text in meinem div

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

und klicken Sie auf die Änderungstext-Taste I der Text die „Änderung alt“ zu sein und auf klicken, ich möchte es wechseln zum alten Text wieder.

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

Ist dies tatsächlich möglich, mit dem aktuellen Ansatz mit Hilfe von CSS und Javascript, oder hätte ich meine HTML anders zu strukturieren? Wenn es mit dem derzeitigen Ansatz möglich ist, wie?

Answer 1

Wenn Sie nach einem Text-Rotator suchen, können Sie so etwas tun.

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>

aktualisiert. Jetzt ist dieser Code sehr viel skalierbar. Haben Sie eine beliebige Anzahl von <p> Tags und es wird funktionieren. Sie müssen das JavaScript nicht ändern. Nur HTML, können Sie hinzufügen/entfernen. Bitte lassen Sie mich wissen, ob das funktioniert. Ich habe jquery nicht verwendet!

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> 

Sie diesen Code Text zu ändern und es, wie es vor