Javascript if else 语句隐藏和显示 div

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

你应该给“respond”div一个公共(public)类:

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