Javascript 如何更改每个自定义范围步骤上图标的颜色

我有一个自定义范围，我已经设计和修改

对于每个步骤，在绿色框中的范围下方显示一个文本值，在每个步骤的顶部显示图标

我想知道，当选择一个步骤时，如何更改图标的背景色？我添加了一些无法正常工作的额外javascript代码

例如，在第一步中，组图标将为绿色，当您选择下一步时，人员将为绿色，组将变为默认灰色，依此类推

多谢各位

var arr=new Array（）；
arr[1]=“所有人”；
arr[2]=“仅显示我的组”；
arr[3]=“仅显示我”；
var rangeSlider=函数（）{
变量滑块=$（“.range滑块”），
范围=$（“.range-slider\uu range”），
值=$（“.range-slider_u值”）；
slider.each（函数（）{
value.each（函数（）{
var值=$（此）
.prev（）
.attr（“价值”）；
$（this.html（arr[value]）；
});
range.on（“输入”，函数（）{
$（本）
.next（值）
.html（arr[this.value]）；
});
//设置活动图标
$（'.range图标li'）.removeClass（'active selected'）；
var icons=$（'.range icons'）.find（'li:n个子（'+icons+'））；
icons.addClass（'activeselected'）；
回归风格；
});
};
范围滑块（）
*，
*：之前，
*：之后{
框大小：边框框；
}
身体{
字体系列：无衬线；
填充：60px 20px；
}
@介质（最小宽度：600px）{
身体{
填充：60px；
}
}
.范围滑块{
保证金：0；
}
.范围滑块{
宽度：24%；
}
.范围-滑块范围{
-webkit外观：无；
/*宽度：钙（100%-（73px））*/
宽度：100%；
高度：6px；
边界半径：5px；
背景：#d7dcdf；
大纲：无；
填充：0；
保证金：0；
}
.range-slider\uu range:：-webkit滑块拇指{
外观：无；
宽度：18px；
高度：18px；
边界半径：50%；
背景#2c3e50；
光标：指针；
过渡：背景。15秒缓进缓出；
}
.range-slider\uu range:：-webkit滑块拇指：悬停{
背景：#1abc9c；
}
.range-slider_uu范围：活动：-webkit滑块拇指{
背景：#1abc9c；
}
.range-slider\uu range:：-moz range thumb{
宽度：18px；
高度：18px；
边界：0；
边界半径：50%；
背景#2c3e50；
光标：抓取；
过渡：背景。15秒缓进缓出；
}
.range-slider_uurange:活动：--moz range thumb{
光标：抓取；
背景：#1abc9c；
}
.range-slider\uu range:：-moz range thumb:悬停{
背景：#1abc9c；
}
.range-slider__值{
显示：块；
位置：相对位置；
颜色：#fff；
字体大小：12px；
边缘顶部：10px；
线高：20px；
文本对齐：居中；
背景：绿色；
填充：0；
}
/*.range-slider_uu值：之后{
位置：绝对位置；
顶部：8px；
左：-7px；
宽度：0；
身高：0；
边框顶部：7px实心透明；
右边框：7px实心#2c3e50；
边框底部：7px实心透明；
内容：''；
}*/
：-moz音程轨迹{
背景：#d7dcdf；
边界：0；
}
输入：：-moz焦点内部，
输入：：-moz焦点外部{
边界：0；
}
/*.范围标签{
利润率：9px-21px 0；
填充：0；
列表样式：无；
}
.范围标签李{
位置：相对位置；
浮动：左；
宽度：60px；
文本对齐：居中；
颜色：#b2b2b2；
字体大小：14px；
光标：指针；
}
.范围标签。活动{
颜色：#37adbf；
}
.range labels.selected:：before{
背景#37adbf；
}
.range labels.active.selected:：before{
显示：无；
}*/
/*图标*/
.范围图标{
利润率：9px-20px 0；
填充：0；
列表样式：无；
}
.范围图标li{
位置：相对位置；
浮动：左；
宽度：33%；
文本对齐：居中；
颜色：#b2b2b2；
字体大小：10px；
}
.范围图标。活动{
颜色：#37adbf；
}
.范围图标。选定：：之前{
背景#37adbf；
}
.范围图标.活动.选定：：之前{
显示：无；
}


组
人
锁

0
当范围输入在
范围中更改时，您可以创建类并使用
addClass
添加相应的类

$('.material-icons:nth('+ ( this.value - 1) +')').addClass('class-'+(this.value))

由于您的
此.value
从
1
开始：


var arr=new Array（）；
arr[1]=“所有人”；
arr[2]=“仅显示我的组”；
arr[3]=“仅显示我”；
var rangeSlider=函数（）{
变量滑块=$（“.range滑块”），
范围=$（“.range-slider\uu range”），
值=$（“.range-slider_u值”）；
slider.each（函数（）{
value.each（函数（）{
var值=$（此）
.prev（）
.attr（“价值”）；
$（this.html（arr[value]）；
});
range.on（“输入”，函数（）{
$（本）
.next（值）
.html（arr[this.value]）；
$（'.material icons'）.attr（'class'，'material icons'））
$（'.material-icons:n（'+（this.value-1）+'））.addClass（'material-icons-class-'+（this.value））
});
});
};
RangeSloider（）；
*，*：之前，*：之后{
框大小：边框框；
}
身体{
字体系列：无衬线；
填充：60px 20px；
}
@介质（最小宽度：600px）{
身体{
填充：60px；
}
}
.范围滑块{
保证金：0；
}
.范围滑块{
宽度：24%；
}
.范围-滑块范围{
-webkit外观：无；
/*宽度：钙（100%-（73px））*/
宽度：100%；
高度：6px；
边界半径：5px；
背景：#d7dcdf；
大纲：无；
填充：0；
保证金：0；
}
.range-slider\uu range:：-webkit滑块拇指{
外观：无；
宽度：18px；
高度：18px；
边界半径：50%；
背景#2c3e50；
光标：指针；
过渡：背景。15秒缓进缓出；
}
.range-slider\uu range:：-webkit滑块拇指：悬停{
背景：#1abc9c；
}
.range-slider_uu范围：活动：-webkit滑块拇指{
背景：#1abc9c；
}
.range-slider\uu range:：-moz range thumb{
宽度：18px；
高度：18px；
边界：0；
边界半径：50%；
背景#2c3e50；
光标：抓取；
过渡：背景。15秒缓进缓出；
}
R