Как из input val передать значение в span?

Question

[Николай Добрынин]

Есть 2 input

<input type="hidden" name="cena" id="mse2_ms|price_0" value="25" data-current-value="25" class="form-control ml-1" data-decimal="0">
<input type="hidden" name="cena" id="mse2_ms|price_1" value="40" data-current-value="40" class="form-control ml-1" data-decimal="0">

Значение value динамически меняется т.к. это слайдер цены товара. Нужно передать эти значения в
<span class="min_val"> и <span class="max_val">
Но что то я делаю не так видимо.

$("input#mse2_ms|price_0").keyup(function () {
var value = $(this).val();
$(".min_val").text(value);
}).keyup();

$("input#mse2_ms|price_1").keyup(function () {
var value = $(this).val();
$(".max_val").text(value);
}).keyup();

Может кто то пояснить , что нужно поменять?

Answer 1

[0xD34F]

id="mse2_ms|price_0"

Да, совсем не говнокод.

Убить мало дегенерата, который додумался | засунуть в id.

Указывайте id не через #, а как значение атрибута, т.е. [id="mse2_ms|price_0"].

Comments

[Николай Добрынин]

Это синтаксис Modx тут согласен по поводу кода. Правильно ли я понял что должно получиться нечто такое ?

$("[id="mse2_ms|price_1"]").keyup(function () {
var value = $(this).val();
$(".max_val").text(value);
}).keyup();

[0xD34F]

Николай, почти. Как вы думаете - зачем придумали подсветку синтаксиса?

[Николай Добрынин]

0xD34F, я тут немного поменял код дабы упростить конструкцию, получилось следующее

$(".price_0").keyup_min(function () {
var value = $(this).val();
$(".min_val").text(value);
}).keyup();

$("price_1").keyup_max(function () {
var value = $(this).val();
$(".max_val").text(value);
}).keyup();

Но, почему то выводится только значение price_0 и динамически не изменяется.
признаться я в тупике(

[0xD34F]

Николай,

Что такое keyup_min? Что такое keyup_max? Я таких методов не знаю.

".price_0" и "price_1" - ну вы разберитесь, должна быть точка в начале, или нет.

[Николай Добрынин]

$(".price_0").keyup(function () {
var value = $(this).val();
$(".min_val").text(value);
}).keyup();

$(".price_1").keyup(function () {
var value = $(this).val();
$(".max_val").text(value);
}).keyup();

А как сделать что бы динамически менялось значение?

[0xD34F]

Николай, что значит "динамически менялось"? Какое значение, где?

[Николай Добрынин]

0xD34F, как я и говорил, значение val меняется засчет ползунка, так как это слайдер фильтра по цене. То есть price_0 это левый ползунок, а price_1 это правый. Соответственно когда их тянут меняется значение value и оно меняется в input, но не передаются в span/

[0xD34F]

Николай, никакого ползунка нет, вы его не показали.

[Николай Добрынин]

<fieldset id="mse2_ms|price">
   <legend>Цена</legend>
 
             <div class="range mse2_number_inputs ">
                Дипозон :
                <span class="min_val">25</span> -
                <span class="max_val">40</span>
          
            
    <label for="mse2_ms|price_0" class="d-flex align-items-center">
   
        <input type="hidden" class="price_0" name="cena" id="mse2_ms|price_0" value="28" data-current-value="25" data-decimal="0">
    </label>
    <label for="mse2_ms|price_1" class="d-flex align-items-center">
   
        <input type="hidden" class="price_1" name="cena" id="mse2_ms|price_1" value="37" data-current-value="40" data-decimal="0">
    </label>         </div>
  
    <div class="mse2_number_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 20%; width: 60%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 20%;"></span><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 80%;"></span></div>
   
</fieldset>

на фронте выглядит это вот так.

[0xD34F]

Николай, "на фронте выглядит"? И это всё, что вы можете сказать? То есть, даже не понимаете, откуда взялся ваш ползунок. Ну, круто, что тут ещё сказать. Судя по классам - это jquery-ui slider. Добавьте ему обработчик события change:

change(e, ui) {
  $('.min_val').text(ui.values[0]);
  $('.max_val').text(ui.values[1]);
},