別の選択項目でdivを変更し、元に戻すことはありません。 [NO 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

は、私がお勧めしますものですあなたはそのような何かを行うことができます。

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 2

あなたは非表示に追加し、「非表示」または「隠された」クラスを削除することで要素を示しています。

document.getElementById('vliegtuig_8').className = "" 
document.getElementById('vliegtuig_8').className = "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を（）があります。クラス名が1つだけの場合、これは必要ありません。

Answer 3

セレクタを連結するだけで比較する必要はありません。 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 4

あなたは、あなたの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 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'; 

}