изменить значение объекта с помощью onchange jquery

Question

У меня есть объект с именем фильтра, который я хочу изменить в пределах объекта при изменении ползунка диапазона

Мой HTML-код:

<input id="length" class="border-0" type="range" min="1" max="100"/>

и мой JQuery:

function updateData() {
    var filter = {};
    filter.length = $('#length').val();
    return filter;
}

$('#length, #height, #capacity').change(function () {
   updateData();
   console.log(updateData())
});

Ниже код не работает и возвращает число от 1 до 100

Answer 1

Попробуйте вместо этого:

filter["length"] = $('#length').val();

Это исключает вероятность того, что вы устанавливаете фактическое свойство length, но вам действительно необходимо получить доступ к этому свойству, как, например, IIRC:

filter["length"]

IMO, было бы проще изменить имя свойства, но я старался сделать его максимально похожим на ваш код.

Answer 2

Это должно сработать - я немного реорганизовал ваш код и добавил фильтр во внешнюю область видимости, чтобы вы могли обновлять объект в зависимости от различных типов. Обновленные данные теперь принимают тип и значение и задают ключ и значение объекта в зависимости от цели.

var filter = { length:0, height:0, capacity:0 };
function updateData(id, value) {
    filter[id] = value;
    return filter;
}

$('#length, #height, #capacity').change(function (e) {
    console.log( updateData(e.target.id, e.target.value) );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="length">Length</label>
<input id="length" class="border-0" type="range" min="1" max="100"/>
<label for="height">Height</label>
<input id="height" class="border-0" type="range" min="1" max="100"/>
<label for="capacity">Capicity</label>
<input id="capacity" class="border-0" type="range" min="1" max="100"/>

Если вам нужно «живое» значение, см. Этот пример Codepen: https://codepen.io/juanbrujo/pen/uIqaw