如何通过var选择JavaScript“ Id”？

Question

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

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

 <div class="row" style="display: inline-block; width: 45%; margin: 0px 5px 5px 5px;"> <div class="col-sm-5" style="padding: 2px;"> <label class="control-label" style="float: left">Jasność:</label> <span class="filterValue" id="brightnessId">0</span> </div> <div class="col-sm-7" style="padding: 2px;"> <input id="brightness" type="range" min="-100" max="100" step="1" value="0" data-filter="brightness" onchange="showVal(this.value, this.id)"> </div> </div> 

Answer 1

您无需使用# ，也不需要将其括在""之间

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

这是一个有效的例子

您还可以这样编写以下代码：

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

只使用this在你的HTML

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

Answer 2

看起来您正在混用jQuery和Vanilla JavaScript。 。 。 您应该可以使用以下代码：

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

Answer 3

由于您已将jQuery包含在标签中，因此我会使用它。 我还将使用mousemove而不是change ，以便您的输出元素得到实时更新：

输入栏位：

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

jQuery的：

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

演示

---

或 ，因为您的输入字段具有data-filter="..."属性，并且您希望拥有更多实际上执行相同功能（对比度，清晰度等）的字段，所以我将删除id ，将class添加为选择器，然后使用此data-filter属性来匹配输出元素（ 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">

jQuery（用于所有这些字段）：

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

演示