shylov
@shylov
Начинающий

Фиксация ползунка на выбранном интервале после отправки события?

После перезагрузки страницы ползунки возвращаются в исходное положение . Необходимо чтобы ползунки оставались в интервале выбранных значений и была возможность установить новый интервал . За ранее спасибо !
var drag = false;
values = [];
for (i = 0; i < 2001; 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); // функция сработает при нажатие кнопки по этому элементу
})

$(document).on("mousemove", function (e) {
    if (!drag) return;
    var x = (e.pageX - $(drag).outerWidth() / 2 - $(drag).parent().parent().offset().left) / $(drag).parent().parent().outerWidth();
    console.log($(drag).parent().parent().offset().left); // $(drag).outerWidth() / 2 - это убрали отступы ползунков, $(drag).parent().parent().offset().left) - это отступ от левого края экрана до элемента, $(drag).parent().parent().outerWidth() - это ширина элемента 200px
    if (x < 0) x = 0;
    if (x > 1) x = 1;
    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); // меняет число атрибута ".rp" 0.91 ...
    updateView($(drag).parent().parent());
});
$(document).on("mouseup", function () {
    drag = false;
});


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

    // console.log(ar1)

    $('.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];
}
    $(".gmc-submit").on("click", function () {
        var val1 = $('.gmc-input1').val();
        var val2 = $('.gmc-input2').val();
    })

5fbf9898ed1d3060318129.png
  • Вопрос задан
  • 33 просмотра
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега HTML
CEO iAmStudio, предприниматель.
Используй localStorage или sessionStorage для хранения значений.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
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];
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы