私のCSSクラスをオブジェクトとして参照していますか？

Question

私は、選択すると、適切なセクションを表示するはずの選択オプションがあります。デフォルトでは、すべてがdisplay:noneに設定されています。

この例では、6月が選択されている場合は、クラスがjuneのすべてのdivが表示されます。

$('#list').change(function() { 
    if ($(this).val() == "june") { 
     $('.june').css('display', 'block') 
    } 
}); 

コードは必要なとおりに動作します。しかし、私はこれをさらに効率的に書いていきたいと思います。私は月をさらに追加する予定です。そのために、どのように私はこの線に沿って何かをやって行くだろう：thischosenmonthは、ユーザーが選択した月と一致

$('#list').change(function() { 
    if ($(this).val() == { 
      thischosenmonth 
     }) { 
     $('.{thischosenmonth}').css('display', 'block') 
    } 
}); 

？

Answer 1

あなたはdisplay:none;その後、（私はそのためのshow()を使用します）、対応する月の選択のためのdisplay:block;を設定するには、ドロップダウンの値を使用して、（私はそのためのhide()を使用します）最初にすべての月を設定することができます。だから、HTMLは（明らかにもっとヶ月で）このような何かを見ている場合：

<select id='sel-month'> 
    <option disabled selected>Choose a Month</option> 
    <option value='january'>January</option> 
    <option value='february'>February</option> 
    <option value='march'>March</option> 
</select> 
<div class='month january'>This is the January box.</div> 
<div class='month february'>This is the February box.</div> 
<div class='month march'>This is the March box.</div> 

ドロップダウンが変更されたときは、該当月の情報を表示するには、このようなスクリプトを使用することができます。

$('#sel-month').change(function(){ 
    $('.month').hide(); 
    $('.' + $(this).val()).show(); 
}); 

ここですfiddle：https://jsfiddle.net/1yk44zbq/