javascript - 使用 onchange jquery 更改对象的值

Question

我有一个带有过滤器名称的对象，我想在范围 slider 更改时更改对象内的数量

我的 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

这应该可行 - 我稍微重构了您的代码并向外部范围添加了过滤器，以便您可以根据不同的类型更新对象。 Updatedata 现在采用类型和值，并根据目标设置对象键和值。

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