Javascript，相同代码，不同按钮错误

有些奇怪的事情发生了，我有一个函数，应该以相同的方式处理所有按钮，但它没有。我找不到错误。 只有第三个按钮工作正常。输入范围div移动并将其自身放置在另一侧，以便您可以切换它

我想这是左动画或CSS变量的问题

$（文档）.ready（函数（）{
$（'#reak00'）。更改（保存设置）；
$（'rebk00'）。更改（保存设置）；
$（'#reck00'）。更改（保存设置）；
加载设置（）；
});   
函数loadSettings（）{
$（'#reak00'）.val（localStorage.reak00）；
$（'rebk00'）.val（localStorage.rebk00）；
$（'#reck00'）.val（localStorage.reck00）；
}
函数saveSettings（）{
localStorage.reak00=$（'#reak00'）.val（）；
localStorage.rebk00=$（'#rebk00'）.val（）；
localStorage.reck00=$（'#reck00'）.val（）；
}
var assignHandlers=函数（selectorOne、selectorTwo、SelectorTree）{
返回函数（）{
var distanza=$（selectorOne）；
$（selectorTwo）.on（'focus change'，function（）{
var posizione=$（this.val（）；
css（{left:posizione}）.animate({
“左”：（posizione*100/200）
});
});
$（selectorTwo）.on（'focus change'，function（）{
r=$（selectorTwo.val（）.toString（16）；
var opacityRed=r/100；
css（“背景色”，“rgba（255255255，“+opacityRed+”））；
$（SelectorTree）.css（“框阴影”，“0 0 25px rgba（255127,50，“+opacityRed+”））；
});
};
};
$（document）.ready（assignHandlers（'.fkbtn01'、'.reak00'、“#fbs01”）；
$（document）.ready（assignHandlers（'.fkbtn02'、'.rebk00'、“#fbs02”）；
$（document）.ready（assignHandlers（'.fkbtn03'、'.reck00'、“#fbs03”）；
$（函数（）{
document.getElementById（'reak00'）.focus（）；
document.getElementById（'rebk00'）.focus（）；
document.getElementById（'reck00'）.focus（）；
});
#recorder01{位置：绝对；可见性：可见；左侧：131px；顶部：50px；z索引：150；}
#recorder02{位置：绝对；可见性：可见；左侧：131px；顶部：104px；z索引：150；}
#记录器03{位置：绝对；可见性：可见；左侧：131px；顶部：158px；z索引：150；}
#RECARA01{位置：绝对；可见性：可见；左侧：180px；顶部：50px；z索引：100；}
#RECARA02{位置：绝对；可见性：可见；左：180px；顶部：104px；z索引：100；}
#RECARA03{位置：绝对；可见性：可见；左侧：180px；顶部：158px；z索引：100；}
#offarea01{位置：绝对；可见性：可见；左侧：180px；顶部：50px；z索引：50；}
#offarea02{位置：绝对；可见性：可见；左侧：180px；顶部：104px；z索引：50；}
#offarea03{位置：绝对；可见性：可见；左侧：180像素；顶部：158像素；z索引：50；}
输入[类型=范围]{
-webkit外观：无；
宽度：100%；
身高：100%；
}   
输入：焦点，文本区域：焦点{
大纲：无；
}
.fkbtn01、.fkbtn02、.fkbtn03{
位置：绝对位置；
宽度：50px；
不透明度：0.4；
}
.fkbtn01、.fkbtn02、.fkbtn03输入{
-webkit外观：无；
宽度：100px；
高度：50px；
}  
.fkbtn01、.fkbtn02、.fkbtn03输入：：-webkit滑块拇指{
高度：50px；
宽度：50px；
} 
fakblsfondo先生{
背景色：ccc；
高度：50px；
宽度：50px；
边界半径：4px；
盒影：0 0 25px#FF9900；
}
主任{
背景颜色：灰色；
高度：50px；
宽度：50px；
边界半径：4px；
不透明度：1；
}


当您使用这样的css选择器时，末尾的输入部分并不适用于它前面的所有字段。只有前一个。因此，这些规则仅影响与fkbtn03相关的输入

范例

.fkbtn01 input, .fkbtn02 input, .fkbtn03 input {
.fkbtn01 input::-webkit-slider-thumb, .fkbtn02 input::-webkit-slider-thumb, .fkbtn03 input::-webkit-slider-thumb {

帮助我们，帮助你。期望的结果是什么？目前的行为是什么？您是否有任何错误？第三个按钮正常工作，但第一个和第二个按钮不正常。我确实让一些不透明的行为。请定义“正确工作”和“不”。我们不是读心术的人。应该发生什么以及实际发生了什么？右：输入范围div向左向右移动，以便将自身突出到范围另一侧的鼠标下方。这样，您最终可以切换两个不同的值，如开关。看小提琴哦，我明白了。是否有一个变通方法或完整的代码必须被丢弃？
.fkbtn01 input, .fkbtn02 input, .fkbtn03 input {
.fkbtn01 input::-webkit-slider-thumb, .fkbtn02 input::-webkit-slider-thumb, .fkbtn03 input::-webkit-slider-thumb {