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;
   }

这是working example

你也可以像这样编写这段代码：

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

并在HTML中仅使用this

<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());
});

DEMO

OR ，因为您的输入字段具有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());
});

DEMO

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

3 个答案: