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

select[0].style.backgroundColor=bgColor

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

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

Answer 2

使用click事件触发进行必要更改的函数。使用this选择器确保您的更改仅发生在触发该功能的元素上。

如果要对触发元素的父/子（在您的案例中为父元素）元素进行更改，您始终可以使用JQuery方法 {{1遍历相对于this的DOM。 }} / this.parent()。例如，如果要根据单击的this.children()更改<select>元素的背景颜色，可以使用JQuery以下列方式执行此操作：

<option>

此处，数组按顺序创建，颜色对应于每个选项。

Answer 3

请使用 addClass（＆＃34; color-1＆＃34;）和 removeClass（＆＃34; color-1＆＃34;）。这是唯一的解决方案，并在该课程中做了想做的事。

Sol-1（没有动画背景 nd）

在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', '');
        }}
    );

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

3 个答案: