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

请参考以下代码：

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

函数showreponddiv（messagedivid）{
var responddivid=messagedivid.replace（“message-”，“respond-”）；
if（document.getElementById（responddivid.style.display==“无”）{
document.getElementById（responddivid）.style.display=“inline”；
}否则{
document.getElementById（responddivid）.style.display=“无”；
}
}

上面的代码已经成功使respond div在用户单击message div时出现。当用户再次单击message div时，respond div将消失。现在我的问题是，当用户单击第二条消息以显示第二条消息的回复div时，如何使第一条消息的回复div消失？

您应该为“回复”div设置一个公共类：

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

我们不能使用

GetElementsByCassName

，因为此方法无效。但当然，如果支持此方法，则可以扩展此方法以使用它（对于）。这是留给读者的练习

---

进一步说明：

• 将

  javascript:

  添加到单击处理程序在语法上没有错误，但完全没有必要。只要做：

  onclick="showresponddiv(this.id)"
  

• 如果您必须执行大量此类DOM操作，那么您应该看看这样一个库，它可以大大简化此类任务

---

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

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

编辑：固定逻辑。参见a.

您应该给“respond”div一个公共类：

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

我们不能使用

GetElementsByCassName

，因为此方法无效。但当然，如果支持此方法，则可以扩展此方法以使用它（对于）。这是留给读者的练习

---

进一步说明：

• 将

  javascript:

  添加到单击处理程序在语法上没有错误，但完全没有必要。只要做：

  onclick="showresponddiv(this.id)"
  

• 如果您必须执行大量此类DOM操作，那么您应该看看这样一个库，它可以大大简化此类任务

---

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

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

---

编辑：固定逻辑。请参阅a。

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

e、 g

jQuery是一个Javascript库，它可以帮助您轻松地使用DOM进行操作，并提供跨浏览器兼容性

---

您还可以查看-它是jQuery用于选择DOM元素的JavaScript CSS选择器引擎

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

e、 g

jQuery是一个Javascript库，它可以帮助您轻松地使用DOM进行操作，并提供跨浏览器兼容性

---

您还可以查看—它是jQuery用于选择DOM元素的JavaScript CSS选择器引擎

OP可能不知道jQuery是什么。你应该解释并链接到它。事实上我知道jQuery。jquery$（“.classname”）.hide（）是否存在；支持IE8或以下版本？如果是这样，我应该使用它，因为它不需要在所有div中循环…@zac1987:jQuey在每个浏览器中都可以工作，但当然它仍然必须在元素上循环（它只能使用浏览器中可用的方法），尽管是以高度优化的方式。只是因为看不到它并不意味着jQuery不使用循环；）OP可能不知道jQuery是什么。你应该解释并链接到它。事实上我知道jQuery。jquery$（“.classname”）.hide（）是否存在；支持IE8或以下版本？如果是这样，我应该使用它，因为它不需要在所有div中循环…@zac1987:jQuey在每个浏览器中都可以工作，但当然它仍然必须在元素上循环（它只能使用浏览器中可用的方法），尽管是以高度优化的方式。只是因为看不到它并不意味着jQuery不使用循环；）@菲利克斯·克林，你真是个信息高手！你的密码对我来说很好用。非常感谢你。如果我的页面有200个div，那么隐藏div的加载速度应该很长，因为它需要循环200个div。。。我想知道是否有代码可以检测以前选择的div？哇，谢谢，但是您的代码{div.style.display=“none”}不起作用。因此，当用户在同一个消息div上单击两次时，它不会隐藏回respond div。我真的不知道发生了什么，因为您的if-else语句似乎是正确的。@zac1987:我的逻辑有点错误。对于第二次单击，

current===div

因此它将首先被

if（current）

隐藏，然后再次显示，因为下一个

if

子句是

true

。请更新代码，我还添加了一个演示。@Felix Kling，再次感谢您的完美指导和代码。它现在工作得很好。我试着去理解在这里，如果变量current的数据类型与div不同，那么它不会执行第一个if语句，因此它不会执行第二个if语句来显示div的响应。好的，我现在理解了你的代码。非常感谢。你真是天才！谢谢，谢谢@zac1987：不客气：）那么你也可以接受这个答案；）和

==

不仅比较数据类型，还比较值。鼓励使用严格相等（以防止不必要的元组转换，诚然，这在本例中不太可能，但更为一致）。@Felix Kling，您非常了解信息！你的密码对我来说很好用。非常感谢你。如果我的页面有200个div，那么隐藏div的加载速度应该很长，因为它需要循环200个div。。。我想知道是否有代码可以检测以前选择的div？哇，谢谢，但是您的代码{div.style.display=“none”}不起作用。所以，当用户在同一个消息div上单击两次时，它不会隐藏回respond div。我真的不知道发生了什么，因为您的if-else声明了我