javascript - 修改每个div 彼此分开

Question

我试图通过每个 div.wrap 的选择选项值来显示元素。这是一个 jsfiddle https://jsfiddle.net/na9rbdyo/1/

<div class="wrap">
<select id="type">
    <option default value="0">-- Select One --</option>
    <option value="1">Hot</option>
    <option value="2">Cold</option>
</select>
<div class="hot">
    This is hot!
</div>
<div class="cold">
    This is cold!
</div>
</div>

基本上会有多个相同结构的div。用户可以使用选择框来选择一个选项(用于演示目的的热和冷)如果用户选择冷则只有 div .cold 将显示。

每个选择选项应该只影响所在的 .wrap div。任何帮助将不胜感激。

Answer 1

您想要获取正在更改的选择控件的父级，然后找到具有将要显示的匹配类的 div，如下所示:

$('select').on('change', function() {
    var selectedTxt = $(this).find(':selected').text().toLowerCase();            
    $(this).parent('.wrap').find('div').css('display','none')     
    $(this).parent('.wrap').find('div.'+selectedTxt ).css('display','block');

});