Divを表示して他のすべてを非表示にする

Question

これは簡単なはずですが、まだ動作していないようです。私は、10個程度のオプションを持つhtml select要素を持っています。ユーザーがオプションの1つを選択すると、CSSにdisplay：noneのクラスである.hiddenクラスを削除してDivを表示します。これはすべて正常に動作しますが、次のオプションを選択すると、前のdivは表示されたままになります。 .toggleClassを使ってみましたが、うまくいきませんでした。あなたは何ができるか

$(function() { 
    $("#calc-select").change(function() { 
    $('#' + $("#calc-select").val()).removeClass('hidden'); 
    }); 
}); 

Answer 1

ので

$(function() { 
 
    var prevSelected = $("#Test1"); 
 

 
    $("#calc-select").change(function() { 
 
     $('#' + $("#calc-select").val()).removeClass('hidden'); 
 
     prevSelected.addClass('hidden'); 
 
     prevSelected = $('#' + $("#calc-select").val()); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="calc-select"> 
 
    <option>Test1</option> 
 
    <option>Test2</option> 
 
    <option>Test3</option> 
 
    <option>Test4</option> 
 
    <option>Test5</option> 
 
</select> 
 

 
<div id="Test1"> 
 
Content 1 
 
</div> 
 
<div id="Test2" class="hidden"> 
 
Content 2 
 
</div> 
 
<div id="Test3" class="hidden"> 
 
Content 3 
 
</div> 
 
<div id="Test4" class="hidden"> 
 
Content 4 
 
</div> 
 
<div id="Test5" class="hidden"> 
 
Content 5 
 
</div>

のような変数で以前に選択したオプションは今、このjQueryのコードが何を最初に最初に選択された値を設定して保存していますオプション。次に、隠されたクラスを削除してから、前の選択されたクラスにクラスを戻します。最後に、以前選択した要素を現在選択されている要素に再割り当てします。これにより、以前に選択されたものが常に更新され、それに応じてdivが表示され、非表示になります。