javascript - 在不同的选择项上更改 div，而不是改回来。 [没有 jquery，只有 js]

Question

我试图让用户选择一个选项，根据他们选择的选项，应该有一个 div 显示。到目前为止，这是有效的，但只要用户选择另一个选项，旧的 div 就不会消失。 我刚开始使用 javascript，但我不知道如何实现。 这是我的代码:

function airplane() {
  var vliegtuig = document.getElementById('vliegtuig').value;
  if (vliegtuig == 1) {
    document.getElementById('vliegtuig_1').style.display = 'block';
  } else if (vliegtuig == 2) {
    document.getElementById('vliegtuig_2').style.display = 'block';
  } else if (vliegtuig == 3) {
    document.getElementById('vliegtuig_3').style.display = 'block';
  } else if (vliegtuig == 4) {
    document.getElementById('vliegtuig_4').style.display = 'block';
  } else if (vliegtuig == 5) {
    document.getElementById('vliegtuig_5').style.display = 'block';
  } else if (vliegtuig == 6) {
    document.getElementById('vliegtuig_6').style.display = 'block';
  } else if (vliegtuig == 7) {
    document.getElementById('vliegtuig_7').style.display = 'block';
  } else if (vliegtuig == 8) {
    document.getElementById('vliegtuig_8').style.display = 'block';
  } else {
    document.getElementById('vliegtuig_id').innerHTML = 'Geen waarde';
  }
}

.hide {
  display: none;
}

<select class="div-toggle" data-target=".my-info-1" name="VliegtuigID" id="vliegtuig" onchange="return airplane()">
            <option value="1" data-show="1"> Airbus-A319-100(OO-SSP)</option>
            <option value="2" data-show="2"> Airbus-A330-300(OO-SSG)</option>
            <option value="3" data-show="3"> AVRO-RJ85(OO-DWE )</option>
            <option value="4" data-show="4"> AVRO-RJ85(OO-DWF)</option>
            <option value="5" data-show="5"> AVRO-RJ84(OO-DWG)</option>
            <option value="6" data-show="6"> Boeing-737-300(OO-VEK)</option>
            <option value="7" data-show="7"> Boeing-737-300(OO-VEL)</option>
            <option value="8" data-show="8"> Boeing-737-400(OO-VEM)</option>
        </select>

<div class="hide" id="vliegtuig_1">1</div>
<div class="hide" id="vliegtuig_2">2</div>
<div class="hide" id="vliegtuig_3">3</div>
<div class="hide" id="vliegtuig_4">4</div>
<div class="hide" id="vliegtuig_5">5</div>
<div class="hide" id="vliegtuig_6">6</div>
<div class="hide" id="vliegtuig_7">7</div>
<div class="hide" id="vliegtuig_8">8</div>

Answer 1

当您可以简单地将选择器连接在一起时，您不需要所有这些比较。您的 JavaScript 可以像这样大大简化，这就实现了在显示新元素时隐藏当前可见元素的目标。

var vliegtuig = document.getElementById('vliegtuig');

vliegtuig.addEventListener("change", function() {
  // select and hide the currently visible element
  var showing = document.querySelectorAll(".vliegtuig.show")[0];
  if (showing) {
    showing.classList.remove("show");
  }

  // now show the selected element
  var value = vliegtuig.value;
  document.getElementById("vliegtuig_" + value).classList.add("show");
});

.vliegtuig {
  display: none;
}

.vliegtuig.show {
  display: block;
}

<select id="vliegtuig">
  <option>Make a selection</option>
  <option value="1">Airbus-A319-100(OO-SSP)</option>
  <option value="2">Airbus-A330-300(OO-SSG)</option>
  <option value="3">AVRO-RJ85(OO-DWE )</option>
  <option value="4">AVRO-RJ85(OO-DWF)</option>
  <option value="5">AVRO-RJ84(OO-DWG)</option>
  <option value="6">Boeing-737-300(OO-VEK)</option>
  <option value="7">Boeing-737-300(OO-VEL)</option>
  <option value="8">Boeing-737-400(OO-VEM)</option>
</select>

<div class="vliegtuig" id="vliegtuig_1">1</div>
<div class="vliegtuig" id="vliegtuig_2">2</div>
<div class="vliegtuig" id="vliegtuig_3">3</div>
<div class="vliegtuig" id="vliegtuig_4">4</div>
<div class="vliegtuig" id="vliegtuig_5">5</div>
<div class="vliegtuig" id="vliegtuig_6">6</div>
<div class="vliegtuig" id="vliegtuig_7">7</div>
<div class="vliegtuig" id="vliegtuig_8">8</div>