我如何选择JavaScript“;Id”;通过变量

How can I select JavaScript "Id" by var?

本文关键字：Id 变量 JavaScript 何选择 选择      更新时间：2024-03-08

我只想通过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>

看起来您混淆了jQuery和vanilla JavaScript。你应该能够简单地使用这个：

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

您不需要使用#，也不需要将其包含在"" 之间

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

并且在HTML 中仅使用this

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

由于您在标记中包含了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());
});

演示

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

相关文章：