javascript - 如何将选择下拉选项的值与 div 类进行比较以切换它以提高可见性？

Question

我有一个下拉列表说国家列表，在它下面我有一个 div 类，比如 map-uk、map-fr、map-es。现在在下拉列表的变化上，我想查看选择了哪个国家并基于该显示特定的地图，该地图位于一个 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"or 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())

选择相应的元素。