Конвертировать код mootools в jquery

0

У меня есть слайдер, и я манипулирую им цветом и градиентом.

Он использует 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.

Пожалуйста, помогите мне.

  • 2
    попробуйте jsfiddle.net/arunpjohny/EDW5h/2
  • 0
    Также, пожалуйста, ознакомьтесь с основами JQuery и селекторы learn.jquery.com
Теги:
mootools

2 ответа

1
Лучший ответ

Пытаться

Используйте селектор элементов и атрибутов для ориентации элементов 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(''));
});

Демо: скрипка

  • 0
    Спасибо @Arun P Джонни!
1

Если работает Mootools, зачем менять?

простой javascript:

var inputs = document.querySelectorAll('input[type="range"]');
for (var i = 0; i < inputs.length; i++) {
    var item = inputs[i];
    item.addEventListener('change', function () {
        value = (this.value - this.min) / (this.max - this.min)
        this.style.backgroundImage = [
            '-webkit-gradient(',
            'linear, ',
            'left top, ',
            'right top, ',
            'color-stop(' + value + ', #0B8CDD), ',
            'color-stop(' + value + ', #898989)',
            ')'].join('');
    });
};

скрипка


Вот еще одна версия, с очень litle jQuery:

$('input[type="range"]').change(function () {
    value = (this.value - this.min) / (this.max - this.min)
    this.style.backgroundImage = [
        '-webkit-gradient(',
        'linear, ',
        'left top, ',
        'right top, ',
        'color-stop(' + value + ', #0B8CDD), ',
        'color-stop(' + value + ', #898989)',
        ')'].join('');
});

скрипка

  • 1
    Спасибо @ Серджио! На самом деле, остальная часть моего кода проекта находится в Jquery, и я получал ошибки при портировании этого фрагмента кода из Mootools в Jquery, который я кодировал ранее. :)
  • 0
    @ Софтвар, хорошо! Счастлив, что смог помочь. ура
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню