为什么我的 JS 脚本只在我的第一个 html 对象实例上运行

Question

我有这个js脚本链接到我的html(在互联网上找到(

$(function() {
var rangePercent = $('[type="range"]').val();
$('[type="range"]').on('change input', function() {
rangePercent = $('[type="range"]').val();
$('h4').text(rangePercent);
$('[type="range"]').css('filter', 'hue-rotate(-' + rangePercent*8 + 'deg)');
});
});

我的 HTML 中有范围输入的 serval 实例。 为什么此代码仅适用于"范围"输入的第一个实例？

Answer 1

.val()将仅检索jQuery集合中第一个元素的值。此外，$('[type="range"]').css将设置与该[type="range"]选择器匹配的所有元素的 CSS。在回调中，改为引用this，以引用已更改的输入：

$(function() {
$('[type="range"]').on('change input', function() {
const rangePercent = $(this).val();
$('h4').text(rangePercent);
$(this).css('filter', 'hue-rotate(-' + rangePercent*8 + 'deg)');
});
});