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

Javascript if else statement to hide and show div

提问by zac1987

Please refer to the following codes :

请参考以下代码：

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

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 时出现响应 div。当用户再次单击消息 div 时，响应 div 将消失。现在我的问题是当用户单击第二条消息以显示第二条消息的响应 div 时，如何使第一条消息的响应 div 消失？

回答by Felix Kling

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

您应该为“响应”div 提供一个通用类：

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

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

然后，您可以使用 获取所有 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';
        }
    }
}

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.

我们不能使用getElementsByClassName，因为IE8及以下不支持此方法。但当然，如果支持，可以扩展此方法以使用它（对于querySelectorAll）。这留给读者作为练习。

---

---

Further notes:

补充说明：

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

  onclick="showresponddiv(this.id)"
  

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

• 添加javascript:到点击处理程序在语法上没有错，但完全没有必要。做就是了：

  onclick="showresponddiv(this.id)"
  

• 如果您必须进行大量此类 DOM 操作，您应该查看一个库，例如jQuery，它极大地简化了此类任务。

---

---

Update:If always only one responseis 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";
    }
}

Edit: Fixed logic. See a DEMO.

编辑：固定逻辑。查看演示。

回答by Anton Palyok

You can add some class to all divs with id="respond-"

您可以向所有带有 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>

Now at first row of your function "showresponddiv()" you should find all divs with class "classname" and hide them.

现在，在函数“showresponddiv()”的第一行，您应该找到所有类为“classname”的 div 并隐藏它们。

With jQueryit is simple code:

使用jQuery，它是简单的代码：

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

jQuery - is a Javascript Library that helps you to easy manipulate with DOM and provides cross-browser compatibility.

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

Also you can look to Sizzle- it is a JavaScript CSS selector engine used by jQuery for selecting DOM elements

你也可以看看Sizzle——它是一个 JavaScript CSS 选择器引擎，jQuery 使用它来选择 DOM 元素