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

Answer 2

我会在这个答案中建议你一些最好的做法：

使用类而不是样式属性，这对浏览器来说更好。
不要使用内联事件处理程序。请参阅下面的示例。
这不是你要找的“替换”，而是“切换”。
我建议你使用事件冒泡。这样，您就可以在所有div的容器上添加一个事件，并且可以对此进行处理。

好的，现在举个例子：

HTML：

<div id="container">
    <div id="div1">..</div>
    <div id="div2" class="hidden">..</div>
    <div id="div3" class="hidden">..</div>
</div>

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 = '';
    }
};

当然，CSS：

.hidden {
    display: none;
}

我强烈建议您阅读javascript代码中的评论。

如果仔细阅读，您会发现在现代浏览器中，JS代码只需5行。不再。要支持旧版浏览器，它需要7行。

javascript每次点击都会替换div

2 个答案: