Question

请参阅以下代码：

<div id="message-1" onclick="javascript:showresponddiv(this.id)>
</div>
<div id="respond-1" style="display:none;">
</div>
<div id="message-2" onclick="javascript:showresponddiv(this.id)>
</div>
<div id="respond-2" style="display:none;">
</div>

<script type="text/javascript">
function showresponddiv(messagedivid){
    var responddivid = messagedivid.replace("message-", "respond-");
    if (document.getElementById(responddivid).style.display=="none"){
        document.getElementById(responddivid).style.display="inline";
    } else {
        document.getElementById(responddivid).style.display="none";
    }
}
</script>

上面的代码已经成功，当用户点击消息div时，会出现响应div。当用户再次单击消息div时，响应div将消失。现在我的问题是当用户点击第二条消息显示第二条消息的响应div时，如何使第一条消息的响应div消失？

Answer 1

你应该给“响应”div一个共同的类：

<div id="respond-1" class="response' style="display:none;"></div>

然后您可以使用getElementsByTagName获取所有div，比较该类并将其隐藏在匹配项中：

function hideAllResponses() {
    var divs = document.getElementsByTagName('div');
    for(var i = divs.length; i-- ;) {
        var div = divs[i];
        if(div.className === 'response') {
            div.style.display = 'none';
        }
    }
}

我们无法使用getElementsByClassName，因为此方法为not supported by IE8 and below。但是当然可以扩展此方法以便在支持时使用它（对于querySelectorAll也是如此）。这留给读者练习。

补充说明：

在单击处理程序中添加javascript:在语法上没有错，但完全没必要。只是做：
```
onclick="showresponddiv(this.id)"
```
如果你需要做很多这种DOM操作，你应该看一下像jQuery这样的库，它可以大大简化这些任务。

更新：如果始终只显示一个回复并且您担心速度，则存储对已打开的引用的引用：

var current = null;

function showresponddiv(messagedivid){
    var id = messagedivid.replace("message-", "respond-"),
        div = document.getElementById(id);

    // hide previous one
    if(current && current !== div) {
        current.style.display =  'none';
    }   

    if (div.style.display=="none"){
        div.style.display="inline";
        current = div;
    } 
    else {
        div.style.display="none";
    }
}

编辑：修正逻辑。查看DEMO 。

Answer 2

您可以为id =“respond - ”

的所有div添加一些类

例如

<div id="respond-1" class="classname" style="display:none;"></div>
<div id="respond-2" class="classname" style="display:none;"></div>

现在你的函数“showresponddiv（）”的第一行你应该找到所有带有“classname”类的div并隐藏它们。

使用jQuery，这是一个简单的代码：

$(".classname").hide();

jQuery - 是一个Javascript库，可以帮助您轻松操作DOM并提供跨浏览器兼容性。

您也可以查看Sizzle - 它是jQuery用于选择DOM元素的JavaScript CSS选择器引擎

Javascript if else语句隐藏和显示div

2 个答案: