Question

我有一个页面，其中包含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() {

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

Answer 1

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

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

Answer 2

您可以添加一个存储当前可见表的变量，也可以向该表添加一个类，当其更改时，只需删除该类即可。我将使表ID像“ 表11 ”，“ 表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：

.visible {
    display: "block"
}

Answer 3

我建议您将一个类添加到当前正在显示的类中，称为“当前显示”，否则请在您每个人的内部进行

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

在所有其他条件之前，在顶部找到要显示的当前div并将显示设置为“无”，然后删除该类。

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

Answer 4

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

function showDiv() {
  var options = { 11: 'one',  21: 'two', 31: 'three', 41: 'four', 
                  52: 'five', 63: 'six', 74: 'seven', 99: 'test' } 

  var id = document.getElementById.bind(document);

  for (var key in options)
    id(options[key]).style.display = 'none';

  var key = id("certification-select").value + '' + id("location-select").value;
  id(options[key] || 'test').style.display = 'block';
}

<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="5">USA</option>
    <option value="5">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>

<div style='display: none' id='one'>one</div>
<div style='display: none' id='two'>two</div>
<div style='display: none' id='three'>three</div>
<div style='display: none' id='four'>four</div>
<div style='display: none' id='five'>five</div>
<div style='display: none' id='six'>six</div>
<div style='display: none' id='seven'>seven</div>
<div style='display: none' id='test'>test</div>

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

4 个答案: