更改文本

比方說，我在我的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不同？如果現在的方法有可能，那又如何呢？

來源

2017-07-03 BoJack Horseman

前用div標籤和首秀只有一個格，換行的段落時，單擊更改文本，顯示其他分區並隱藏當前顯示div。 –

如果你正在尋找一個文本旋轉器，你可以做這樣的事情。

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！

來源

2017-07-03 23:22:50

但是，如果我想要第三個文本，也可以嗎？ –

正如我向你展示的那樣，它是**可能的**，但是如果你按照上述建議的方式使用它，會更好！你只需要改變邏輯。你想讓我這樣做嗎？你在尋找某種文本旋轉嗎？ –

這真的很友善，是的:-)是的，我想要一個textrotator –

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

您可以使用此代碼改變文本和它改回來，因爲它是

來源

2017-07-03 23:38:02

他的問題完全不同......而你的回答是以前的方式。 –

回答

相關問題