创建一个隐藏div的函数

Question

我想在表单中进行选择并单击 'Generate Factsheet' 按钮时显示表格。我有一个工作代码，在显示我感兴趣的 div 时，我单独隐藏其他 div。由于我在表单中有几个选项（因此有几个相应的 div，其中包含相应的表），最终代码看起来很笨重.我想写一个函数来隐藏其他 div，同时显示我感兴趣的那个。这是我目前的代码：

    var tableDivs = ['tableOPVDiv','tablePneumoDiv','tableRotaDiv'];
        var selectedVaccine;
        var selectedTableDiv;

    function generateFactsheetFunction(){
        // Selecting the vaccine chosen from the dropdown
        var e = document.getElementById("selectVaccine");
        selectedVaccine = e.options[e.selectedIndex].text;

        console.log("selectedVaccine: ", selectedVaccine);


        if (selectedVaccine=="Rotavirus Vaccine"){
            selectedTableDiv='tableRotaDiv';
            console.log("rotavirus selected");
            hideOtherTables();


        } else if (selectedVaccine=="Polio Vaccine"){
            console.log("polio selected");
            selectedTableDiv='tableOPVDiv';
            hideOtherTables();

        } else if (selectedVaccine=="Pneumococcal Vaccine"){
            console.log("pneumo selected");
            selectedTableDiv='tablePneumoDiv';
            hideOtherTables();
        }

    }

function hideOtherTables(){
var testa = tableDivs.indexOf(selectedTableDiv);
console.log("tableDivs[testa]: ", tableDivs[testa]);
console.log("testa: ", testa);
testb = tableDivs[testa];
console.log("testb: ", testb);
document.getElementById(tableDivs[testa]).style.display="block";
/*var newTableDivs=tableDivs.splice(testa);*/
        /*for (y=0;y<newTableDivs.length;y++){
            document.getElementById(newTableDivs[y]).style.display="none";
        }*/
}

未注释的部分工作正常。在注释部分，我想说的是，对于除selectedVaccine以外的所有数组元素，我希望显示为：

document.getElementById(tableDivs[testa]).style.display="none";

我无法拼接数据，因为选择是重复的（选择来自表格）。如何将与其他选择关联的tableDivs 的可见性设置为none。

Answer 1

无法读取属性 'style' of null 这意味着 document.getElementById(tableDivs[y]) return null 和找不到这个元素尝试写

document.getElementById("ElementId")

Answer 2

为什么要分别更改每个分区的显示属性？给所有部门起一个共同的 class 名称，并立即隐藏它们，然后只显示所需的 table.

$(".yourClass").hide();
document.getElementById(tableDivs[testa]).style.display="block";

您还必须使用 jQuery 库。

如果您不熟悉 jQuery，那么使用 for 循环先隐藏所有 table，然后仅显示所需的 table。

for (y=0;y<TableDivs.length;y++){//you need not create newTableDivs
  document.getElementById(TableDivs[y]).style.display="none";
}
document.getElementById(tableDivs[testa]).style.display="block";

即你只需要交换执行顺序。 ;)

创建一个隐藏div的函数

Create a function to hide divs

html

javascript

getelementbyid

hide