如何使用 jQuery 获取 asp.net MVC 文本框中更改的范围值

Question

>我在部分视图中有范围标签，该部分视图包含范围标签和文本框，因此范围更改我想在文本框中显示更改的值，我正在使用单个范围标签实现这一点 asp.net 但我正在使用 MVC 并希望编写 jquery 以在 Id = 1 的更改时动态完成它，只有该值应该显示在该特定文本框中，依此类推。

Here is my html code
<div class="row">
<div class="col-10">
<input type="range" class="range custom-range" min="5" max="180" data-cid="@Model.CatId"/>
</div>
<div class="col-2">
<input type="text" class="rangeValue form-control" data-cid="@Model.CatId" />
</div>
</div>

这里是 jquery

$(document).ready(function () {
$('input[data-cid=' + $('.range').data('cid') + ']').change(function () {
$('input[data-cid=' + $('.rangeValue').data('cid') + ']').val($(this).val());
});
});

我已经写了这个jQuery，但它仍然仅适用于一个部分视图

Answer 1

您可以使用class selector来存档您的需求，而不是data-cid如下所示

$('input.custom-range').change(function () {
$('input.rangeValue').val($(this).val());
});

$(document).ready(function () {
$('input.custom-range').change(function () {
$('input.rangeValue').val($(this).val());
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-10">
<input type="range" class="range custom-range" min="5" max="180" data-cid="100"/>
</div>
<div class="col-2">
<input type="text" class="rangeValue form-control" data-cid="123" />
</div>
</div>