更改显示/隐藏 Javascript 的标题标签答案

【问题标题】：Alter Header Label for Show/Hide Javascript更改显示/隐藏 Javascript 的标题标签
【发布时间】：2012-03-05 08:20:49
【问题描述】：

http://jsfiddle.net/YaMhn/8/

^^^^看看能不能帮你解决这个问题

好的，所以我将标签 showhide 添加到我的脚本中

function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
    lbl.innerHTML="Hide";
    document.getElementById('mydiv').style.display="";
}
else
{
    lbl.innerHTML="Show";
    document.getElementById('mydiv').style.display="none";
}
}

function showhide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "none";
} else {
  obj.style.display = "";
}
  }
}

function hide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
  obj.style.display = "none";
} else {
  obj.style.display = "none";
}
  }
}

function hideall(id1,id2,id3,id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display; 
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
}

function show(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "";
} else {
  obj.style.display = "";
}
  }
}

function showall(id1,id2,id3, id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display;
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
}

这是我的标头代码：

Header #1: (titled Runway Information    Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>

标题完美无缺，显示和隐藏就像我编码一样。但我希望它在隐藏时说“显示”，在显示时说“隐藏”。

以前是这样写的：点击展开/关闭

问题是新的 showHide(lbl) 无法按预期工作。

我需要改变什么？

【问题讨论】：

所以...更改innerHTML，有什么大不了的？

标签： javascript show-hide

【解决方案1】：

很简单——使用innerHTML:

style.display="block"
innerHTML="click here to expand"

并隐藏：

style.display="hide"
innerHTML="click here to close"

【讨论】：

您还有什么建议吗？

【解决方案2】：

我所做的唯一更改是 else 到 else if，现在已修复。

http://jsfiddle.net/YaMhn/18/

感谢 Ashraf 的帮助。我会投票给你，但我只有 13 个代表，哈哈。

【讨论】：

【解决方案3】：

我给你做了个例子：http://jsfiddle.net/YaMhn/

【讨论】：

谢谢你的例子。我的问题是如何通过单击 Header DIV 来更改标签？
以上是我正在做的事情的链接……看看你能不能帮忙
我真的很接近答案。看看这个，我现在唯一遇到的问题是，当我点击“全部显示”或“全部隐藏”jsfiddle.net/YaMhn/12 时，交替显示“显示”和“隐藏”
使用相同的逻辑，问题是 [object].innerHTML='something !!';
我没有关注。必须和我一起迈出小步。 Javascript 新手。