修改每个 div 彼此分开答案

【问题标题】：Modify Each Div Separate of each other修改每个 div 彼此分开
【发布时间】：2015-06-29 23:59:13
【问题描述】：

我试图通过每个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。任何帮助将不胜感激。

【问题讨论】：

我不清楚您要做什么。当您从菜单中选择热或冷时，您期望发生什么。小提琴也不错，但您也应该在此处包含代码

标签： javascript jquery

【解决方案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');

});

【讨论】：

这也是一个不错的解决方案

【解决方案2】：

经过一些修改，我已经可以正常工作了

首先不要有多个具有相同 id 的元素，这会导致问题

所以我把它们改成了类

我还添加了一点 css

HTML

<div class="wrap">
    <select class="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 class="wrap">
    <select class="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>

CSS

.hot,
.cold {
    display: none;
}

.display {
  display:block;
 }

jQuery

$('.type').change(function(){
   var select_val = $(this).val();
    var wrap = $(this).parent();
    if(select_val == 1){
        $('.hot', wrap).addClass('display');
        $('.cold', wrap).removeClass('display');
    }else if(select_val == 2 ){
        $('.cold', wrap).addClass('display');
        $('.hot', wrap).removeClass('display');
    }
});

和 Working Demo

【讨论】：