每次点击javascript替换div

Question

下面的工作是用一个新的 div 替换一个 div ...

<div id = "div1" style="display:block" onclick = "replace()"><img src="1.jpg" /></div>

<div id = "div2" style="display:none"><img src="2.jpg" /></div>

<script type = "text/javascript">
function replace() {
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="block";
}

</script>

我想不通的是如何使它工作，所以当您单击 div2 时，它会被替换为 div3 等等。

换句话说，我想在每次点击时多次替换 div。最好的方法是什么？我是新手，所以不确定以上是否是一个好的开始。

谢谢!

Answer 1

你可以做一个更通用的函数:

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

然后你可以创建许多 div 并使用相同的功能:

<div id = "div1" style="display:block" onclick = "replace('div1','div2')">...</div>
<div id = "div2" style="display:none" onclick = "replace('div2','div3')">..</div>
<div id = "div3" style="display:none" onclick = "replace('div3','div4')">..</div>
...