javascript javascript在每次点击时替换div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10687479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript replace div on each click
提问by rivitzs
The following works to replace a div with a new div...
下面的工作用一个新的 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>
What I can't figure out is how to make this work so when you click div2it is replaced by div3and so on.
我想不通的是如何使这个工作，所以当你点击div2它被替换div3等等。
In other words, I want to replace the div on each click more than just once. What's the best way to go about this? I'm a novice, so not sure if the above is a good start or not.
换句话说，我想不止一次地在每次点击时替换 div。解决这个问题的最佳方法是什么？我是新手，所以不确定以上是否是一个好的开始。
Thanks!
谢谢！
回答by Johno
You could make a more generic function:
您可以创建一个更通用的函数：
function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="block";
}
Then you can create many divs and use the same function:
然后你可以创建许多 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>
...
回答by Florian Margaine
I will suggest you some best practices in this answer:
我会在这个答案中建议你一些最佳实践：
- Use classes instead of the style property, it's way nicer for the browser.
- Don't use inline event handler. See the example below.
- It's not "replace" you're looking for, it's "toggling".
- I suggest you use event bubbling. This way, you add a single event on the container of all your div, and you can work on this.
- 使用类而不是样式属性，这对浏览器来说更好。
- 不要使用内联事件处理程序。请参阅下面的示例。
- 这不是您要寻找的“替换”，而是“切换”。
- 我建议你使用事件冒泡。通过这种方式，您可以在所有 div 的容器上添加一个事件，并且您可以对此进行处理。
Alright, now for the example:
好的，现在举个例子：
HTML:
HTML：
<div id="container">
<div id="div1">..</div>
<div id="div2" class="hidden">..</div>
<div id="div3" class="hidden">..</div>
</div>
JS:
JS：
// Notice how I declare an onclick event in the javascript code
document.getElementById( 'container' ).onclick = function( e ) {
// First, get the clicked element
// We have to add these lines because IE is bad.
// If you don't work with legacy browsers, the following is enough:
// var target = e.target;
var evt = e || window.event,
target = evt.target || evt.srcElement;
// Then, check if the target is what we want clicked
// For example, we don't want to bother about inner tags
// of the "div1, div2" etc.
if ( target.id.substr( 0, 3 ) === 'div' ) {
// Hide the clicked element
target.className = 'hidden';
// Now you have two ways to do what you want:
// - Either you don't care about browser compatibility and you use
// nextElementSibling to show the next element
// - Or you care, so to work around this, you can "guess" the next
// element's id, since it remains consistent
// Here are the two ways:
// First way
target.nextElementSibling.className = '';
// Second way
// Strip off the number of the id (starting at index 3)
var nextElementId = 'div' + target.id.substr( 3 );
document.getElementById( nextElementId ).className = '';
}
};
And of course, the CSS:
当然，CSS：
.hidden {
display: none;
}
I highly suggest you read the comments in the javascript code.
我强烈建议您阅读 javascript 代码中的注释。
If you read carefully, you'll see that in modern browsers, the JS code is a matter of 5 lines. No more. To support legacy browsers, it requires 7 lines.
如果你仔细阅读，你会发现在现代浏览器中，JS 代码只有 5 行。不再。为了支持旧浏览器，它需要 7 行。
