Задать вопрос
Ответы пользователя по тегу JavaScript
  • Фиксация ползунка на выбранном интервале после отправки события?

    shylov
    @shylov Автор вопроса
    Начинающий
    Спасибо , я так и сделал . Можно сделать немного проще отправив значения в адресную строку и изъять их от туда. Возможно так даже проще , так как несколько предложений в коде сократится , в том плане что адресная строка обновляется по дефолту при переходе в другие страницы , и обновляется по событию без удаления .
    Может быть кому то поможет , вот код :
    $(document).ready(function () {
        fixedcount()
        getUrlVar()
        fixed()
    });
    
    function getUrlVar() {
        var urlVar = window.location.href; // получаем параметры из урла
        var resultArray = []; // массив для хранения переменных
        var valueAndKey = []; // массив для временного хранения значения и имени переменной
        arrayVar1 = (urlVar.substr(31)).split('start_price='); // разбираем урл на параметры
        if (arrayVar1[0] == "e") return false;
        for (i = 0; i < arrayVar1.length; i++) { // перебираем все переменные из урла
            valueAndKey1 = arrayVar1[i].split('#'); // пишем в массив имя переменной и ее значение
        }
        arrayVar2 = (urlVar.substr(31)).split('end_price='); // разбираем урл на параметры
        if (arrayVar2[0] == "e") return false;
        for (i = 0; i < arrayVar2.length; i++) { // перебираем все переменные из урла
            valueAndKey2 = arrayVar2[i].split('='); // пишем в массив имя переменной и ее значение
        }
        res1 = valueAndKey1;
        res2 = valueAndKey2;
    }
    getUrlVar(); // вывел функцию в общий поток кода что бы извлечь переменные
    value1 = res1[0];
    value2 = res2[0];
    
    var drag = false;
    values = [];
    for (i = 0; i < 2172; i++) {
        h = (i + "").length < 1 ? "0" + i : i;
        values.push(h)
    }
    $('.slider').each(function (i, e) {
        updateView(e);
    });
    
    $(".slider>.bar>.lp,.slider>.bar>.rp").on("mousedown", function () {
        drag = $(this); // это (.slider>.bar>.lp) или (.slider>.bar>.rp) в зависимости от того какой ползунок нажат
        var n = localStorage.getItem('left'); // перед движением ползунка по нажатию беру измененное значение и записываю в аттрибут тега
        var m = localStorage.getItem('width'); // перед движением ползунка по нажатию беру измененное значение и записываю в аттрибут тега
        $('.lp').attr("data-pos", n); // обновляю данные аттрибута
        $('.rp').attr("data-pos", m); // обновляю данные аттрибута
        localStorage.removeItem("left"); // удаляю старую запись в локал для последующей цепочки
        localStorage.removeItem("width"); // удаляю старую запись в локал для последующей цепочки
    })
    
    $(document).on("mousemove", function (e) {
        if (!drag) return;
        var x = (e.pageX - $(drag).outerWidth() - $(drag).parent().parent().offset().left) / $(drag).parent().parent().outerWidth();
         // $(drag).outerWidth() / 2 - это убрали отступы ползунков, $(drag).parent().parent().offset().left) - это отступ от левого края экрана до элемента, $(drag).parent().parent().outerWidth() - это ширина элемента 200px
        if (x < 0) x = 0;
        if (x > 0.921) x = 0.921;
        var rp = $(drag).parent().find(".rp");
        var lp = $(drag).parent().find(".lp");
        if ($(drag).hasClass("lp") && x > $(rp).attr("data-pos")) {
            $(rp).attr("data-pos", x); // что ползунки не выходили за границу линии
        }
        if ($(drag).hasClass("rp") && x < $(lp).attr("data-pos")) {
            $(lp).attr("data-pos", x); // что ползунки не выходили за границу линии
        }
        $(drag).attr("data-pos", x); // меняет число атрибута('.lp' и '.rp') ".rp" 0.91 ...
        updateView()
    });
    $(document).on("mouseup", function () {
        drag = false;
        var val1 = $('.gmc-input1').val();
        var val2 = $('.gmc-input2').val();
        parent.location.hash = "start_price=" + val1 + "#end_price=" + val2;
        var left = $('.lp').attr("data-pos");
        var width = $('.rp').attr("data-pos");
        localStorage.setItem('left', left); // для записи данных когда остановлен ползунок в выбранной точке
        localStorage.setItem('width', width); // для записи данных когда остановлен ползунок в выбранной точке
    });
    
    function updateView() {
        var l = $('.slider').find(".lp").attr("data-pos"); // 0
        var r = $('.slider').find(".rp").attr("data-pos"); // 1
        var x = $('.slider').outerWidth() * l; // 0
        var w = (r - l) * $('.slider').outerWidth(); // 200
        var n = localStorage.getItem('left'); // для фиксации ползунка который не нажат
        var m = localStorage.getItem('width'); // для фиксации ползунка который не нажат
        var ar1 = n != undefined ? n : x;
        var ar2 = m != undefined ? m : w;
    
        $('.slider').find(".bar").css({ left: ar1 + "px", width: ar2 + "px" });
    
        var index = Math.round(values.length * l);
        if (index >= values.length)
            index = values.length - 1;
        document.querySelector(".gmc-input1").value = values[index];
        index = Math.round(values.length * r);
        if (index >= values.length)
            index = values.length - 1;
        document.querySelector(".gmc-input2").value = values[index];
    }
    
    function fixed() {
        if (value1 == '') return ;
        if (value2 == '') return ;
        var n = value1 / 10; // сделать условие для с массивом values так как тут value переменные
        var m = (value2 - value1) / 10;
        $('.slider').find(".bar").css({ left: n + "px", width: m + "px" });
        document.querySelector(".gmc-input1").value = value1;
        document.querySelector(".gmc-input2").value = value2;
    }
    function fixedcount() { // При обновлении страницы ползунки по дефолту
        var l = $('.slider').find(".lp").attr("data-pos"); // 0
        var r = $('.slider').find(".rp").attr("data-pos"); // 1
        var x = $('.slider').outerWidth() * l; // 0
        var w = (r - l) * $('.slider').outerWidth(); // 200
        $('.slider').find(".bar").css({ left: x + "px", width: w + "px" });
        var index = Math.round(values.length * l);
        if (index >= values.length)
            index = values.length - 1;
        document.querySelector(".gmc-input1").value = values[index];
        index = Math.round(values.length * r);
        if (index >= values.length)
            index = values.length - 1;
        document.querySelector(".gmc-input2").value = values[index];
    };
    Ответ написан
    Комментировать