在不同的 select 项上更改 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

通常您通过添加然后删除 'hide' 或 'hidden' class.

来隐藏和显示元素

document.getElementById('vliegtuig_8').className = ""
document.getElementById('vliegtuig_8').className = "hide"

所以在你的函数开始时，只需将所有元素设置为 "hide"，然后取消隐藏其中的 1 个。

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

<script>
  var all  = document.getElementsByClassName('onlyOne')
  for( item of all){ item.className = 'onlyOne hide'; }
</script>

jQuery 有 .addClass() 和 .removeClass() 可以更容易地处理具有多个 class 的元素。但如果您只有 1 个 class 名称，则不需要。

Answer 2

当您可以简单地将选择器连接在一起时，您不需要所有这些比较。您的 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>

Answer 3

您应该知道，如果您显示其中一个 div，它不会隐藏其他的。

为此，您需要隐藏显示的那个。你可以这样做：

let elementShown;
function airplane() {
    if (elementShown)
         elementShown.style.display = "none"; // That will hide the last element shown

    var vliegtuig = document.getElementById('vliegtuig').value;
    if (vliegtuig == 1) {
        elementShown = document.getElementById('vliegtuig_1')
    }
    else if (vliegtuig == 2 ){
        elementShown = document.getElementById('vliegtuig_2'}
    }
    //and so on ....

    elementShown.style.display = 'block';
}

我用你自己的算法写的，但为了更进一步，我会像这样写飞机：

let currentElement; // Variable containing the element visible
function airplane () {
   if (currentElement)
         currentElement.style.display = "none"; // That will hide the last 
   var vliegtuig = document.getElementById('vliegtuig').value;
   elementShown = document.getElementById('vliegtuig_' + vliegtuig);
   elementShown.style.display = 'block';
}

Answer 4

这是我的建议。

function airplane() {
  var allElements = document.getElementsByClassName('vliegtuig');

  for (var i = 0; i < allElements.length; i++) {
    //put the hide class back on the elements that may have had it removed
    allElements[i].classList.add('hide');
  }

  var vliegtuig = document.getElementById('vliegtuig').value;
  
  if (vliegtuig > 0 && vliegtuig < 9) {
    //find the one element that should be shown, and remove the hide class
    document.getElementById('vliegtuig_'+ vliegtuig.toString()).classList.remove('hide');
  } 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 vliegtuig" id="vliegtuig_1">1</div>
<div class="hide vliegtuig" id="vliegtuig_2">2</div>
<div class="hide vliegtuig" id="vliegtuig_3">3</div>
<div class="hide vliegtuig" id="vliegtuig_4">4</div>
<div class="hide vliegtuig" id="vliegtuig_5">5</div>
<div class="hide vliegtuig" id="vliegtuig_6">6</div>
<div class="hide vliegtuig" id="vliegtuig_7">7</div>
<div class="hide vliegtuig" id="vliegtuig_8">8</div>

Answer 5

您可以尝试使用我根据您的 DOM 结构编写的以下代码：

function airplane() {

  var vliegtuig = document.getElementById('vliegtuig').value;
  var getDiv = document.getElementsByClassName('hide');

  for(var i=0; i<getDiv.length;i++){
    getDiv[i].style.display = 'none';
  }

  document.getElementById('vliegtuig_'+vliegtuig).style.display = 'block';

}

在不同的 select 项上更改 div，而不是改回原样。 [没有jquery，只有js]

Change div on different select item, not changing back. [NO jquery, only js]

html

javascript

css

html-select