javascript - selectドロップダウンオプションの値をdivクラスと比較して、可視性のためにこれを切り替えるにはどうすればよいですか？

Question

国のドロップダウンリストがあり、その下に、map-uk、map-fr、map-esなどのクラスを持つdivがあります。ドロップダウンの変更時に、どの国が選択されているかを確認し、それに基づいて、ドロップダウンの値と等しいクラスを持つdivにある特定のマップを表示します。

私は以下のようなことを試みています：

    $(function() {
    $("select").onchange(function() {
    if($(this).val() == //I need to compare the class of div that has map)
    {
   //show that map
//hide others
    }
    })
    })

これを行うためのより良いオプションはありますか？私は好きになりたくない

$(function() {
    $("select").onchange(function() {
    if($(this).val() == "uk")
    {
    $(.map_uk).show();
    $(.map_fr,.map_es).hide()
    }

if($(this).val() == "fr")
    {
    $(.map_fr).show();
    $(.map_uk,.map_es).hide()
    }
blah blah blah
    })
    })

Answer 1

class="map map_uk"またはのような要素の一般的なクラスと特定のクラスを作成しますclass="map map_es"。だから、あなたはこれを行うことができます

$(function() {
    $("select").change(function() {
       $('.map').hide();
       $('.map_'+$(this).val()).show();        
    });
    $("select").change();
});

Answer 2

これはどう：

// #mapsHolder - div that contains all .map_* divs
$("select").onchange(function() {
    // hide all maps
    $('#mapsHolder > div').hide();
    // find a map with class ('.map_' + current value) which will turn into 'map_uk' etc
    $('#mapsHolder .map_' + $(this).val()).show();
});

Answer 3

値とクラスが一致する限り、次のようなことができます

$('.map_' + $(this).val())

対応する要素を選択します。