Javascript if else语句隐藏和显示div [英] Javascript if else statement to hide and show div

问题描述

请参阅以下代码：

<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消失？

The codes above already success make the respond div appear when user click on message div. The respond div will disappear when user click on message div again. Now my question is how to make the respond div of 1st message disappear when user click on 2nd message to display the respond div of 2nd message?

推荐答案

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

You should give the "respond" divs a common class:

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

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

Then you can get all divs by using getElementsByTagName, compare the class and hide them on a match:

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 ）。这是留给读者的练习。

We cannot use getElementsByClassName, because this method is not supported by IE8 and below. But of course this method can be extended to make use of it if it is supported (same for querySelectorAll). This is left as an exercise for the reader.

附加说明：

• 在单击处理程序中添加 javascript：在语法上没有错，但完全没必要。只需这样做：

• Adding javascript: to the click handler is syntactically not wrong but totally unnecessary. Just do:

onclick="showresponddiv(this.id)"

如果你需要做很多这种DOM操作，你应该看一下像 jQuery ，大大简化了这些任务。

If you have to do a lot of DOM manipulation of this kind, you should have a look at a library such as jQuery which greatly simplify such tasks.

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

Update: If always only one response is shown and you are worried about speed, then store a reference to opened one:

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 。

这篇关于Javascript if else语句隐藏和显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！