javascript - 根据所选元素更改下一个 div 的背景

Question

编辑:看来我没有说清楚，对此感到抱歉，所以我更新了代码。

我有很多“选择”，具有不同的 ID 和相同的类:

    <div class="objvalide">
    <select id="obj1-1" class="swit">
        <option selected="selected" value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <div class="switchy-container">
        <div class="switchy-bar">
            <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
        </div>
    </div>
</div>

<div class="objvalide">
    <select id="obj1-2" class="swit">
        <option selected="selected" value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <div class="switchy-container">
        <div class="switchy-bar">
            <div class="switchy-slider" draggable="true" style="left: 0px;"></div>
        </div>
    </div>
</div>

……还有更多……

这是我目前拥有的 JS:

 $(function() {
    $('.swit').switchy();
    $('.swit').change(function() {

            var select = $(this);
            var id = select.attr('id'); //alert(id); <- Works fine, I get the correct ID
        /* what do I hav to do here in order to have .switchy-bar bg change color only for this particular .objvalide > .switchy-container > .switchy-bar ? */
        });
    });

一开始，所有选项都是“0”。 每个 .switchy-bar 背景都是白色的。

例如，当我在 obj1-2 中选择选项值“1”时，我需要其 .switchy-bar 的背景为红色。如果我选择选项值“2”，其 .switchy-bar 的背景必须为绿色。

其他选择和背景必须保持不变。

谢谢

Answer 1

$('.swit').on('change', function() {

  var myVal = $(this).val();

  switch (myVal){
    case '1': $(this).siblings().children('.switchy-bar').css('background', '#000');
    break
    case '2': $(this).siblings().children('.switchy-bar').css('background', '#f00');
    break
    default: $(this).siblings().children('.switchy-bar').css('background', '#fff'); 
  }

})

http://codepen.io/gmrash/pen/LpoGYG?editors=101