jQuery 滑动切换复选框无法更改背景颜色

Question

我试图在打开开关时将其背景颜色更改为绿色。我认为我已经正确完成了所有操作，但背景仍然是灰色的。

我做错了什么？

Here is my fiddle

$('.slider-button').toggle(function(){
    $(this).addClass('on').parent().next('input[type="checkbox"]').attr('checked', 'checked');
    $('.slider-frame').addClass('green');
},function(){
    $(this).removeClass('on').parent().next('input[type="checkbox"]').removeAttr('checked');
    $('.slider-frame').removeClass('green');
});

提前致谢。

Answer 1

添加样式

#stage .slider-frame.green {
    background-color: #5fca42 !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    box-shadow: 0 1px 0 rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.32), inset 0 0 3px rgba(0,0,0,.12);
    background-image: -webkit-linear-gradient(bottom, #5fca42 0%, #5fca42 0.27%, #d8d8d8 100%);
}

演示:Fiddle