Javascript 如何在if-else语句中的隐藏元素之间切换

我有一个包含7个隐藏表的页面。根据用户从2个选项字段中选择的内容，应显示分配给这些选项的表格。我编写了一个if/else语句，它从两个选项栏中获取值，并将这些值提供给用户所需的表。问题是，我想编写一个条件，当用户选择另一个选项时，“上一个表”将消失。现在，当用户选择其他选项时，“第二张表”显示在第一张表的正下方

<select id="certification-select" onchange = "showDiv()">
    <option value="-1">Select</option>
    <option value="1">certified</option>
    <option value="2">not certified</option>
    <option value="3">not certified north</option>
    <option value="4">not certified south</option>
    <option value="5">international</option>
    <option value="6">USA</option>
    <option value="7">Europe</option>
</select>

<select id="location-select"onchange = "showDiv()">
    <option value="-1">Select</option>
    <option value="1">BWZ</option>
    <option value="2">TDI</option>
    <option value="3">USC</option>
    <option value="4">SSC</option>
</select>

---

首先隐藏所有表，然后根据条件显示表

function showDiv() {
    document.getElementById("one").style.display="none";
    document.getElementById("two").style.display="none";
    //
    //Write code to hide all tables
    //

    var certification = document.getElementById("certification-select").value;
    var location = document.getElementById("location-select").value;

    if (certification === "1" && location === "1"){
        document.getElementById("one").style.display="block";
    }
    else if (certification === "2" && location === "1"){
        document.getElementById("two").style.display="block";

    }
    else if (certification === "3" && location === "1"){
        document.getElementById("three").style.display="block";
    }
    else if (certification === "4" && location === "1"){
        document.getElementById("four").style.display="block";
    }
    else if (certification === "5" && location === "2"){
        document.getElementById("five").style.display="block";
    }
    else if (certification === "6" && location === "3"){
        document.getElementById("six").style.display="block";
    }
    else if (certification === "7" && location === "4"){
        document.getElementById("seven").style.display="block";
    }else{
        document.getElementById("test").style.display="block";
    }    
}

---

首先隐藏所有表，然后根据条件显示表

function showDiv() {
    document.getElementById("one").style.display="none";
    document.getElementById("two").style.display="none";
    //
    //Write code to hide all tables
    //

    var certification = document.getElementById("certification-select").value;
    var location = document.getElementById("location-select").value;

    if (certification === "1" && location === "1"){
        document.getElementById("one").style.display="block";
    }
    else if (certification === "2" && location === "1"){
        document.getElementById("two").style.display="block";

    }
    else if (certification === "3" && location === "1"){
        document.getElementById("three").style.display="block";
    }
    else if (certification === "4" && location === "1"){
        document.getElementById("four").style.display="block";
    }
    else if (certification === "5" && location === "2"){
        document.getElementById("five").style.display="block";
    }
    else if (certification === "6" && location === "3"){
        document.getElementById("six").style.display="block";
    }
    else if (certification === "7" && location === "4"){
        document.getElementById("seven").style.display="block";
    }else{
        document.getElementById("test").style.display="block";
    }    
}

---

您可以添加一个存储当前可见表的变量，也可以向该表添加一个类，当该类发生更改时，只需删除该类即可。我会使表ID像“table-11”、“table-12”等等。作为类存储似乎更干净

function showDiv() {

    var certification = document.getElementById("certification-select").value;
    var location = document.getElementById("location-select").value;

    //check of other visible  table

    var tables = document.querySelector('table.visible');
    tables.forEach(function(t){
       //remove the visible class, or you can also add style
        t.classList.remove("visible");
    });
    //add the class to the new table which you want to make visible
    var newTabl = document.getElementById('table-'+certification+location);
    newTabl.classList.add("visible");

}

CSS:

---

您可以添加一个存储当前可见表的变量，也可以向该表添加一个类，当该类发生更改时，只需删除该类即可。我会使表ID像“table-11”、“table-12”等等。作为类存储似乎更干净

function showDiv() {

    var certification = document.getElementById("certification-select").value;
    var location = document.getElementById("location-select").value;

    //check of other visible  table

    var tables = document.querySelector('table.visible');
    tables.forEach(function(t){
       //remove the visible class, or you can also add style
        t.classList.remove("visible");
    });
    //add the class to the new table which you want to make visible
    var newTabl = document.getElementById('table-'+certification+location);
    newTabl.classList.add("visible");

}

CSS:

---

我建议您在当前显示的类中添加一个名为“current showing”的类，如果需要，请在每个人内部执行此操作

if (certification === "1" && location === "1"){
   var current = document.getElementById("one");
   current.className += " currentlyShowing";
   current.style.display="block";
}

在所有if-else之前的顶部，找到正在显示的当前div，并将显示设置为“none”，然后删除该类

 var current = document.getElementById("currentlyShowing");
 current.style.display="none";
 current.classList.remove("currentlyShowing");

---

我建议您在当前显示的类中添加一个名为“current showing”的类，如果需要，请在每个人内部执行此操作

if (certification === "1" && location === "1"){
   var current = document.getElementById("one");
   current.className += " currentlyShowing";
   current.style.display="block";
}

在所有if-else之前的顶部，找到正在显示的当前div，并将显示设置为“none”，然后删除该类

 var current = document.getElementById("currentlyShowing");
 current.style.display="none";
 current.classList.remove("currentlyShowing");

---

可以通过使用查找对象来缩短：

函数showDiv（）{
var options={11:'一'，21:'二'，31:'三'，41:'四'，
52:'五'，63:'六'，74:'七'，99:'测试'}
var id=document.getElementById.bind（文档）；
for（变量输入选项）
id（options[key]）.style.display='none'；
var键=id（“认证选择”）。值+“”+id（“位置选择”）。值；
id（选项[键]| |“测试”）.style.display='block'；
}

挑选
证实
未认证
未认证北
没有南部认证
国际的
美国
欧洲
挑选
BWZ
甲苯二异氰酸酯
南加州大学
SSC
一
二
三
四
五
六
七
使用查找对象可以缩短测试时间：


函数showDiv（）{
var options={11:'一'，21:'二'，31:'三'，41:'四'，
52:'五'，63:'六'，74:'七'，99:'测试'}
var id=document.getElementById.bind（文档）；
for（变量输入选项）
id（options[key]）.style.display='none'；
var键=id（“认证选择”）。值+“”+id（“位置选择”）。值；
id（选项[键]| |“测试”）.style.display='block'；
}

挑选
证实
未认证
未认证北
没有南部认证
国际的
美国
欧洲
挑选
BWZ
甲苯二异氰酸酯
南加州大学
SSC
一
二
三
四
五
六
七
test
尝试先隐藏所有表，然后根据条件显示表尝试先隐藏所有表，然后根据条件显示表我使用此方法时一直遇到此错误“Uncaught TypeError:无法读取null的属性'style'”@ORCos我添加了工作示例。顺便说一句，我刚刚注意到您的if语句检查的证书数最多为7，但certification select的值最多只有5。您是对的。。这只是一种类型。。编辑。谢谢：）当我使用这个方法“UncaughtTypeError:Cannotreadproperty'style'of null”时，我一直遇到这个错误@ORCos我添加了一个工作示例。顺便说一句，我刚刚注意到您的if语句检查的证书数最多为7，但certification select的值最多只有5。您是对的。。这只是一种类型。。编辑。谢谢：）