使用class .button

Question

我想用jquery更改Slider-thumb颜色，但问题是，如果我将它与jquery一起使用，我在StyleSheet中使用的相同CSS代码将不再起作用。下面的示例有一个用于更改拇指颜色的工作css和一个jquery按钮，它应该执行相同的操作。有没有解决方案，如何用jquery来完成？

编辑：拇指是被移动的东西。在这种情况下，大圆蓝色。我想改变拇指而不是轨道

HTML

<input class="topcoat-range-input" type="range" value="0" min="0" max="100" data-role="none" step="1">
<div class='button'>Change Color!</div>

CSS

.topcoat-range-input::-webkit-slider-thumb {
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0, 0, 0, 0.36);
    border-radius: 30px;
    background: rgba(131, 208, 255, 0.75);
    box-shadow: 0 0 20px 2px rgba(131, 208, 255, 0.75);
}

的JavaScript

$('.button').on('click', function (e) {
    $('.topcoat-range-input::-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');
});

演示

http://jsfiddle.net/qcn6tmpz/3/

Answer 1

错误的jQuery选择器

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

在你的情况下，我会尝试覆盖此按钮的css。

.topcoat-range::-webkit-slider-thumb

普通的JavaScript似乎有效：

for(var j = 0; j < document.styleSheets[1].rules.length; j++) {
    var rule = document.styleSheets[1].rules[j];
    if(rule.cssText.match("webkit-slider-thumb")) {
        rule.style.backgroundColor="rgba(255, 208, 255, 0.75)";
    }
}

Answer 2

如果删除::-webkit部分，它可以正常工作：

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

编辑：由于你需要-webkit部分，这样做的一种（略微混乱）方法是每次单击按钮时添加一个样式规则：

$('.button').on('click', function (e) {
    $("<style type='text/css'>.topcoat-range-input::-webkit-slider-thumb{background:rgba(255, 208, 255, 0.75)}</style>").appendTo($("head"));
});

Answer 3

使用class .button

将事件正确附加到div

 $(document).on('click','.button', function (e) {

   $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

**

http://jsfiddle.net/qcn6tmpz/4/

Answer 4

另一种方法是使用拇指的背景颜色定义类。值更改时，设置映射到该值的相应类名。例如，如果滑块的值为2，我们定义一个提供预期背景颜色的类名：

.slider2::-webkit-slider-thumb {    
background: gray;

}

处理类映射的JS应如下所示。

var styles = {"1":"slider1","2":"slider2","3":"slider3"};

slider.oninput = function() {      
  slider.className = 'slider ' + styles[this.value];
}

请查看此链接以获取更多详细信息：

http://www.ozkary.com/2017/11/input-range-slider-with-color-indicator.html

使用jquery更改纯HTML Slider-Thumb颜色（包括工作css）

4 个答案:

使用class .button

http://jsfiddle.net/qcn6tmpz/4/