显示/隐藏变量中的多个DIVs

Question

我使用嵌套的for循环来生成一个表的多个实例，其中包含项目的详细信息；在这些实例下，我希望有一个显示/隐藏按钮，它将在较高级别上提供每个项目的简短描述。

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

下面的代码产生了一个在我的页面上不起作用的"Show/Hide“链接(见截图)。我是不是遗漏了什么？

仅供参考:下面代码中的"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>";
}

​

​

Answer 1

您忽略了一个事实，即HTML标记“id”(例如，用于您的项目的表)应该是唯一的，否则"getElementById“将无法工作。现在，它们都设置为“仪表板”。至少您可以添加索引，并将其设置为"dashboard1“、"dashboard2”等……

另外，在IIRC中，'display = "none";‘的对立面是'display = "inline";'，而不是'display = "";’。虽然这需要在不同的浏览器上进行更多的测试，以选择最佳选项。

第三，onclick事件中的JavaScript调用对属性值定义(包括JS调用)和字符串参数(要显示/隐藏的id )都使用了单引号...这不是有效的语法，您需要这两个用例中的一个使用双引号。

代码的另一个主要问题是，正如mikez302已经指出的那样："Javascript函数名区分大小写。您的函数名为showhide，但您正在尝试调用ShowHide。“更正这两个问题(引号和函数名)将允许代码正常工作，我刚刚对其进行了测试。:)