显示/隐藏变量中的多个 DIV答案

【问题标题】：Show/Hide Multiple DIVs in a variable显示/隐藏变量中的多个 DIV
【发布时间】：2013-03-28 15:48:05
【问题描述】：

我正在使用嵌套的 for 循环来生成包含项目详细信息的表的多个实例；我希望在该按钮下有一个显示/隐藏按钮，该按钮将简要介绍每个项目。

我正在尝试操作我在此处找到的代码：https://forums.digitalpoint.com/threads/javascript-to-show-hide-tables.1009918/

以下代码会生成一个在我的页面上不起作用的“显示/隐藏”链接（请参见屏幕截图）。我错过了什么吗？

仅供参考 - 下面代码中的“Separate”是一个包含唯一项目引用的数组，以促进每个项目的表的分离。因此，Separate 包含 4 个元素的地方，应该有 4 个项目、4 个表，等等。

非常感谢，卡尔

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

for(i in Separate){
DescID[i] = "DescID"+i;}

var Table = "";

for(i in Separate){
Table += "<table  id='dashboard' summary='Project Dashboard'>";
Table += "<THEAD>";
Table += "<TR><TH scope='col' colspan=4><B>"+ Separate[i] +"</B></TH></TR>";
Table += "<TR><TH scope='col'>Task Names</TH><TH scope='col'>Task Summary</TH><TH scope='col'>RAG</TH><TH scope='col'>Timeline</TH></TR></THEAD>";
Table += "</THEAD>";
Table += "<TBODY>";

    for(j in Project){
    if(Project[j] == Separate[i]){
        Table += "<TR><TD title='" + Comments[j] + "'>"+ Task[j] +"</TD><TD>"+ Summary[j] +"</TD><TD><img src='/images/RAG/" + RAG[j] + "'></TD><TD>"+ DateType[j] +" "+ Status[j].substring(0,10) +"</TD></TR>";
            }
    }

Table += "</TBODY>";
Table += "</table>";
Table += "<a onclick ='javascript:ShowHide('" + DescID[i] + "')' href='javascript:;' >Show/Hide Project Description</a>";
Table += "<div class='mid' id='" + DescID[i] + "' style='DISPLAY: none' >Placeholder for Project Description</div>";
Table += "<BR>";
}

【问题讨论】：

不确定这是否是拼写错误，但您正在循环两次，一次在另一次中。另外，你是如何在页面上放置描述的？单击“显示/隐藏项目描述”链接时是否遇到任何错误？
嗨@Robbert，我看不到我在其中循环两次Separate ....我在定义表之前有一次，之后有一次。是的，我得到“语法错误”，但就是这样。我计划使用另一个包含我将调用的描述的数组来代替上面的“项目描述的占位符”。
@KarlMajor 什么样的语法错误？看起来您正在使用错误的名称调用函数。
我认为 Javascript 函数名称是区分大小写的。您的函数名为showhide，但您正试图调用ShowHide。这可能会导致问题。
另外，具有相同 id 属性的多个元素可能会导致问题。见this question。

标签： javascript html show-hide

【解决方案1】：

您错过了这样一个事实，即 HTML 标记“id”（例如，对于您的项目表）应该是唯一的，否则“getElementById”将不起作用。现在它们都设置为“仪表板”。至少您可以添加索引，并将它们设为“dashboard1”、“dashboard2”等...

另外，IIRC，'display = "none";' 的更好反义词是'display = "inline";'，而不是'display = "";'。虽然这需要在不同的浏览器上进行更多测试才能选择最佳选项。

第三，onclick 事件中的 JavaScript 调用对属性值定义（围绕 JS 调用）和字符串参数（要显示/隐藏的 id）使用单引号......这不是有效的语法，你需要这两个用例之一是双引号。

您的代码存在的另一个主要问题是 mikez302 已经发现：“Javascript 函数名称区分大小写。您的函数称为 showhide，但您正在尝试调用 ShowHide。”更正这两个问题（引号和函数名）将允许代码工作，我刚刚测试过。 :)

【讨论】：