显示与类同名的 id 元素答案

【问题标题】：Show id element that has same name as class显示与类同名的 id 元素
【发布时间】：2015-09-12 14:37:49
【问题描述】：

<style>
    #africa,#bahrain,#oman{
        display:none
    }
</style>

<select class="country">
    <option class="africa" value="africa">Africa</option>
    <option class="bahrain" value="bahrain">Bahrain</option>
    <option class="oman" value="oman">Oman</option>
</select>

<div class="countryDetails">
    <div id="africa"><h1>Africa details</h1></div>
    <div id="bahrain"><h1>Bahrain details</h1></div>
    <div id="oman"><h1>Oman details</h1></div>
</div>

如果我从下拉列表中选择一个国家，我将如何创建一个函数来显示该国家的详细信息？

列表项的class 与详细信息同名，期望详细信息是一个ID。

该列表将继续增长，因此它需要是动态的。

【问题讨论】：

你试过这样做吗？

标签： javascript jquery list function select

【解决方案1】：

这样就可以了

$('select').on('change',function(){
    $('.countryDetails').children().hide();
    $('#' + this.value).fadeIn('slow');
});

DEMO

如果您还没有在项目中包含 jQuery，最好使用纯 javascript，因为您不需要为此加载整个 jQuery 库。

您可以改用这个：

var det = document.querySelectorAll('.countryDetails div');
var val = document.getElementById('country');

val.addEventListener('change',function(){
    for (var i = 0; i< det.length;i++){
        det[i].id != val.value ? det[i].style.display = 'none' :  det[i].style.display = 'block';
    }
});

注意我在 html 中为您的国家/地区添加的 id

<select class="country" id="country">
    <option class="africa" value="africa">Africa</option>
    <option class="bahrain" value="bahrain">Bahrain</option>
    <option class="oman" value="oman">Oman</option>
</select>

<div class="countryDetails">
    <div id="africa"><h1>Africa details</h1></div>
    <div id="bahrain"><h1>Bahrain details</h1></div>
    <div id="oman"><h1>Oman details</h1></div>
</div>

DEMO PURE JS

【讨论】：

【解决方案2】：

这是一种解决方案

var t=$('.country').val();

$('#'+t).show();

$('.country').on('change',function(){
    t=$('.country').val();
    $('.countryDetails').children().hide();
    $('#'+t).show();
});

#africa,#bahrain,#oman{
        display:none
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="country">
    <option class="africa" value="africa">Africa</option>
    <option class="bahrain" value="bahrain">Bahrain</option>
    <option class="oman" value="oman">Oman</option>
</select>

<div class="countryDetails">
    <div id="africa"><h1>Africa details</h1></div>
    <div id="bahrain"><h1>Bahrain details</h1></div>
    <div id="oman"><h1>Oman details</h1></div>
</div>

【讨论】：