Javascript 根据所选项目更改下一个div的背景

编辑：我好像没有说清楚，很抱歉，所以我更新了代码

我有许多“选择”，具有不同的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>

0
1.
2.
0
1.
2.

。。。还有更多

以下是迄今为止我掌握的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 ? */
        });
    });

$（函数（）{
$（'.swit'）.switch（）；
$（'.swit'）.change（函数（）{
var select=$（此值）；
var id=select.attr（'id'）；//警报（id）；.switchy容器>.switchy栏*/
});
});

开始时，所有选项均为“0”。 每个开关条的背景都是白色的

例如，当我在obj1-2中选择选项值“1”时，我需要其开关条的背景为红色。若我选择选项值“2”，其开关条的背景必须为绿色

另一个选择和背景必须保持不变

---

谢谢

请使用addClass（“color-1”）和removeClass（“color-1”）。这是解决这个问题的唯一方法，在这个类中做你想做的事情

Sol-1（无动画背景）

在css中

.color-1{
//Do stuff 
}

这对你有帮助

也

Sol-2（带动画背景）

 var record= $(this).find('switchy-bar');
    record.animate(
        {backgroundColor: '#FFF'}, 
        {duration: 'fast', complete: function() {
//Here You can animate with new color. and old animation will be overwritten
            record.css('backgroundColor', '');
        }}
    );

如果要更改所选选项的背景

var a= select[0].selectedIndex;
select[0][a].style.backgroundColor=bgColor

---

使用

单击

事件触发进行必要更改的函数。使用

此

选择器确保您的更改仅发生在触发该功能的元素上

如果要对触发元素的父/子（在您的情况下是父）元素进行更改，则始终可以使用JQuery方法

this.parent（）

this.children（）/
相对于
this.children（）
遍历DOM。例如，如果要根据单击的
更改
元素的背景色，可以使用JQuery通过以下方式进行更改：

var backgroundcolor=[“红色”、“绿色”、“白色”]；
$（“选项”）。单击（函数（）{
$（this.parent（）.css（“背景色”，backgroundcolor[$（this.val（）））；
});

在这里，数组是按照与每个选项对应的颜色顺序创建的

$('.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'); 
  }

})

可能重复的
$（'.swit'）.change（）
-将仅在选择项更改时触发，因此
$（此）
已是选择项。（你不必做
$（这个）。每个（…）
，因为它只会循环一次）哦-我们需要查看
的HTML。切换栏也可以帮助：）问题：
if（select.val（）='0'）{
你想把它用于selected吗？因为这不是selected。你应该
if（select.attr（'selected'）&&select.attr（'selected'）=='selected'）{
您正在写入$（this）.sides（'switchy-bar'））。请为您找到switchy bar类的地方编写Html。使用jQuery为switchy js动态更改背景颜色。您需要在切换完成后进行此bg颜色更改。我强烈不同意这是唯一的解决方案-添加内联
背景颜色和当你不再需要它的时候，就将其移动。虽然这是一个更干净的解决方案。这不会像JS提供的那样为背景设置动画。所以内联更改不会产生所需的动画。很抱歉，我是一个白痴，但是jquery做的一切都像动画一样，而且这种情况发生在内联样式上，所以你错了。jquery只是将其从y中抽象出来直到您使用jQuery查看devtoolschaging color中的动画元素和使用jQuery查看动画颜色都是不同的事情。动画背景颜色在不同的时间（快，慢）执行改变像素十六进制值的操作。太好了！非常感谢您，帮了我很多忙。现在，我需要理解为什么兄弟姐妹（）之前没有使用我的代码：）如果我找到了，我会告诉你的，伙计们
$('.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'); 
  }

})