0

Есть следующая конструкция

<div id="containerRange">
<div id="sliderRange"></div>

<span class="rangeValue">
    <span class="span_max">2</span> - <span class="jash_span_min">123</span>
</span>

<div class="row flex-input">
  <div class="input-group">
    <input type="number" value="2" class="form-control input_min" />     <input type="number" value="123" class="form-control input_max" />
  </div>
</div>
</div>

Где

  1. #sliderRange - Ползунок c двумя значениями - min и max
  2. .rangeValue - два span элемента куда динамически передается положение ползунка
  3. input[type="number"] - два поля ввода

Логика работы данной схемы следующая:

  1. При смене положения ползунка динамически меняется значение в поле span, и загружаются продукты (согласно критериям) и только тогда изменяется значение в input[type="number"];
  2. При изменении значения в input[type="number"] -> загружаются продукты (согласно критериям), изменяется положение ползунка и изменяется значение в span.

Все работает хорошо, если б не одно НО

  • как сделать так, чтобы при смене положения ползунка изменялось динамически значение value в input[type="number"].

Пробовал реализовать так

$('#containerRange').bind('DOMSubtreeModified', function () {
    $(this).find('input.input_min').val($(this).find('.span_min').text());
    $(this).find('input.input_max').val($(this).find('.span_max').text());
});

Данные получаю из span но смена value не происходит

Буду благодарен в помощи, как можно реализовать такое поведение input

3
  • @klifort без демонстрации работы ползунка и кода отвечающего за его изменение - не получается воспроизвести вашу проблему, к примеру: $('.span_max').click(function(){$('input.input_min').val($('.span_max').text());}); вполне работает 29 ноя 2021 в 18:47
  • @Хацкер, тяжело перенести код, так как данные получаются переменно. Интересует как можно реализовать работу JS в такой способ как написано тут - stackoverflow.com/a/26202266/8661408, только в обратную сторону - когда данные входят в span, и уже от него в input.
    – klifort
    29 ноя 2021 в 19:13
  • @Хацкер, да так работает только при событию click, срабатывает загрузка даных и уже тогда изменение атрибута value в input
    – klifort
    29 ноя 2021 в 19:26

1 ответ 1

1

Может кому понадобится решение.

Так как изменение в input можна внести через click решил использовать только событие нажатие кнопки мышки mousedown, далее через DOMSubtreeModifier отслеживать изменения в span и уже в этот момент производить смену value.

$('body').on('mousedown', '.containerRange', function () {

    $('.rangeValue').bind('DOMSubtreeModified', function () {
        var valMin = $(this).find('.span_min').text();
        var valMax = $(this).find('.span_max').text();

        $(this).closest('.containerRange').find('input.input_min').val(valMax).attr('min', valMax).attr('max', valMin);
        $(this).closest('.containerRange').find('input.input_max').val(valMin).attr('min', valMax).attr('max', valMin);
    });
});
<div id="containerRange">
<div id="sliderRange"></div>

<span class="rangeValue">
    <span class="span_max">2</span> - <span class="jash_span_min">123</span>
</span>

<div class="row flex-input">
  <div class="input-group">
    <input type="number" value="2" class="form-control input_min" />     <input type="number" value="123" class="form-control input_max" />
  </div>
</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.