用于隐藏和显示div的Javascript if else语句

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一个通用的类：

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

因为这个方法是not supported by IE8 and below，所以我们不能使用getElementsByClassName。当然，如果支持此方法，则可以对其进行扩展以利用它(对于querySelectorAll也是如此)。这篇文章留给读者作为练习。

进一步说明：

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

onclick="showresponddiv(this.id)"

• If你必须做很多这种DOM操作，你应该看看像这样的库，它极大地简化了这类任务。

更新：如果总是只显示one response，并且您担心速度，则存储对打开的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";
    }
}

编辑:固定逻辑。请参阅。

Answer 2

您可以使用id=“respond”向所有div添加一些类。

e.g

<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 Library，可以帮助您轻松地使用DOM进行操作，并提供跨浏览器兼容性。

您还可以参考Sizzle -它是jQuery用来选择DOM元素的JavaScript CSS选择器引擎