我如何选择JavaScript；Id"；通过var？

我只想通过var设置getElementById（它必须是自动的，因为我有多个这个范围的输入（亮度、对比度、锐化等）。 我该怎么做

函数showVal（值，id）{
var spanId=“#”+id+“id”；
document.getElementById（“\”+spanId+“\”）.innerHTML=value；
}

贾斯诺奇：
0

您不需要使用

#

，也不需要将它括在

之间。“

这是一个

您也可以这样编写代码：

function showVal(obj) {
        var spanId = obj.id + "Id";
        document.getElementById(spanId).innerHTML = obj.value;
}

并且在HTML中只使用

这个

<input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness" onchange="showVal(this)">

---

看起来您将jQuery和vanilla JavaScript混为一谈……您应该能够简单地使用：

function showVal(value, id) {
    document.getElementById(id + "Id").innerHTML = value;
}

---

因为您已经在标记中包含了

jQuery

，所以我会使用它。我也会使用

mousemove

而不是

change

，这样您的输出元素就会实时更新：

输入字段：

<input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness">

---

或，因为您的输入字段具有

数据过滤器=“…”

属性，并且您希望有更多字段实际执行相同的功能（对比度、锐度等），所以我将删除

id

，添加

类

作为选择器，然后使用此

数据过滤器

属性匹配输出元素（

span

）。因此整个过程简单且自动化：

<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#brightness">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#contrast">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#sharpness">

---

为什么要传递

和引号作为ID？我的错误！我把jQ和JS混合在一起…）谢谢！它工作得很好，这个例子是最短的！

$('#brightness').mousemove(function(){
   $('#'+$(this).attr('id')+'Id').text($(this).val());
});

<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#brightness">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#contrast">
<input class="settings" type="range" min="-100" max="100" step="1" value="0" data-filter="#sharpness">

$('.settings').mousemove(function(){
   $($(this).data('filter')).text($(this).val());
});