Question

我试图在拖动手柄后更改Firefox中范围滑块元素的背景渐变。我已经很好地在Chrome中工作了，但由于某种原因，jQuery .on('change', function());事件在FF中没有按预期工作。

我为范围滑块设置了基本样式，如下所示：

background-image: -moz-linear-gradient(top, #4798b6 0%, #90a3a6 0%);

然后当滑块改变时，我正在改变背景：

jQuery('input[type="range"]').on('change', function() {
    var val = (jQuery(this).val() - jQuery(this).attr('min')) / (jQuery(this).attr('max') - jQuery(this).attr('min'));

    jQuery(this).css('background-image', '-moz-linear-gradient(left center, #4798b6 ' + val + ', #90a3a6 ' + val + ')');

});

在Chrome中（为了便于阅读，我省略了-webkit-个样式），这会将句柄后面的所有内容设置为指定的颜色。但是在Firefox中，拖动句柄时不会添加样式。我注意到当把手被拖回到“0”或它的原始位置时添加的样式，但是当滑块实际上具有非0的值时不会。

我创造了一个代码的小提琴。请不要批评所包含的checkBrowser()功能，仅用于测试目的。

https://jsfiddle.net/wz0vyL7a/2/

如果你注意到，这在Chrome＆amp; Safari但没有任何改变。如上所述，我可以清楚地看到样式更改发生在拖动手柄然后拖回到0之后，但是在将其拖动到0以外的任何值之后立即将其删除。

Answer 1

线性渐变需要一个百分比。你需要添加一个＆＃39;％＆＃39;并乘以100：

jQuery(this).css('background-image', '-moz-linear-gradient(left center, #4798b6 ' + (val*100) + '%, #90a3a6 ' + (val*100) + '%)');

请参阅更新的小提琴：https://jsfiddle.net/wz0vyL7a/5/

Firefox jQuery on change event无法按预期工作

1 个答案: