javascript - 将 mootools 代码转换为 jquery

Question

我有一个 slider ，我正在操纵它的颜色和渐变。

它使用 mootools，一切正常。

JSFIDDLE

var inputs = document.getElementsByTagName('input');
inputs = Array.splice(inputs, 0);
inputs.forEach(function (item) {
    if (item.type === 'range') {
        item.onchange = function () {
            value = (item.value - item.min)/(item.max - item.min)
            item.style.backgroundImage = [
                '-webkit-gradient(',
                  'linear, ',
                  'left top, ',
                  'right top, ',
                  'color-stop(' + value + ', #0B8CDD), ',
                  'color-stop(' + value + ', #898989)',
                ')'
            ].join('');
        };
    }
});

我想将 Mootools js 代码转换为 Js/Jquery。

请帮帮我。

Answer 1

尝试

使用element和 attribute selectors要定位 input type="range" 元素，请使用 change()方法注册更改事件处理程序然后使用 .css()设置CSS属性

$('input[type="range"]').change(function () {
    //`this` inside the handler refers to the current input element
    var value = (this.value - this.min) / (this.max - this.min);
    //use `.css()` to set the css properties
    $(this).css('backgroundImage', [
        '-webkit-gradient(',
        'linear, ',
        'left top, ',
        'right top, ',
        'color-stop(' + value + ', #0B8CDD), ',
        'color-stop(' + value + ', #898989)',
        ')'].join(''));
});

演示:Fiddle