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

你应该给"响应"div一个共同的类:

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

然后你可以通过使用获得所有div getElementsByTagName,比较类并在匹配中隐藏它们:

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,因为IE8及以下版本不支持此方法.但是当然可以扩展这种方法,以便在支持时使用它(相同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.