javascript - 创建一个隐藏div的函数

Question

我想在表单中进行选择并单击“生成情况说明书”按钮时显示表格。我有一个工作代码，在显示我感兴趣的 div 时，我单独隐藏其他 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";

我无法拼接数据，因为选择是重复的(选择来自表单)。将与其他选择关联的 tableDiv 的可见性设置为 none 的方法是什么。

Answer 1

为什么要单独更改每个分区的显示属性？为所有分区指定一个公共(public)类名，然后将它们全部隐藏，然后仅显示所需的表。

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

您还必须使用 jQuery 库。

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

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

即您只需交换执行顺序即可。 ;)